表の枠のいろいろ(2)

1.普通の表

tableタグに border-collapse:collapse; の指定をすることでtdとtdの間の隙間がつぶれます。 tdタグにボーダーを設定してあります。線は重なるので1pxと1pxがくっついても1pxです。

table {
  border-collapse:collapse;
}
td {
  border:solid 1px #999999;
}

2.太い外枠

tableタグに太い border を指定することで存在感のある表になります。

table {
  border-collapse:collapse;
  border:solid 3px #999999;
}
td {
  border:solid 1px #999999;
}

3.最初の行

border-collapse:collapse; の指定をすると tr にも border を引けるようになります。

tr:first-child は tr のうち最初に出てくるものという意味で、第一行目になります。

最初の行を th にしてこれのボーダーを太くする方が適切かもしれません。

table {
  border-collapse:collapse;
  border:solid 3px #999999;
}
tr:first-child { 
  border-bottom:solid 3px #999999;
}
td {
  border:solid 1px #999999;
}

4.横線だけ

横線だけにしてみました。文字がくっついて見えるので padding で離してあります。

table {
  border-collapse:collapse;
  border:solid #999999;
  border-width:3px 0 3px 0;
}
td{
  border:solid #999999;
  border-width:1px 0 1px 0;
  padding:1px 4px 1px 4px;
}

5.下だけに線

どうせ重なってしまうなら初めから下だけ書けばいいんじゃない? (変化ないのでどちらでも)

border-collapse:collapse; の指定をすると tr にも border を引けるようになるので、全部 tr に引いてみました。

table {
  border-collapse:collapse;
  border-top:solid 1px #999999;
}
tr{
  border-bottom:solid 1px #999999;
}
td{
  padding:1px 4px 1px 4px;
}