tableタグに border-collapse:collapse; の指定をすることでtdとtdの間の隙間がつぶれます。 tdタグにボーダーを設定してあります。線は重なるので1pxと1pxがくっついても1pxです。
動物 | 鳴き声 | 好物 |
いぬ | わんわん | ほね |
ねこ | にゃー | こたつ |
うま | ひひーん | にんじん |
table { border-collapse:collapse; } td { border:solid 1px #999999; }
tableタグに太い border を指定することで存在感のある表になります。
動物 | 鳴き声 | 好物 |
いぬ | わんわん | ほね |
ねこ | にゃー | こたつ |
うま | ひひーん | にんじん |
table { border-collapse:collapse; border:solid 3px #999999; } td { border:solid 1px #999999; }
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; }
横線だけにしてみました。文字がくっついて見えるので 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; }
どうせ重なってしまうなら初めから下だけ書けばいいんじゃない? (変化ないのでどちらでも)
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; }