html - CSS を使用して最初の写真のようなテーブルをレンダリングするにはどうすればよいですか?

Question

テーブルに CSS を適用したいのですが、"tr" の間の行をレンダリングできません。

Answer 1

CSS を tr 要素に配置しても、必ずしもうまくいくとは限りません。

行の境界線だけを使用する場合は、次のようなものを試すことができます。

td {
border-bottom:1px solid #000;
}

Answer 2

この CSS を追加します。

td {
    border:1px solid #000;
}

Answer 3

これを試してみてください

table {
    border-left:1px solid #000;
    border-bottom:1px solid #000;
}
td {
    border-top:1px solid #000;
    border-right:1px solid #000;
    width:50px;
    padding:0 0 0 10px;
}

動作デモ

Answer 4

に属性rules="all"を追加するだけ<table>です。