表の内側にのみ境界線を追加する方法を見つけようとしています。次のようにします。
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}
境界線はテーブル全体の周囲とテーブルセル間にも配置されます。テーブルセルの周囲のテーブル内部にのみ境界線を配置したいです (テーブルの外側の境界線は配置しません)。
以下は私がテーブルに使用しているマークアップです (重要ではないと思いますが)。
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell (1,1)</td>
<td>Cell (1,2)</td>
</tr>
<tr>
<td>Cell (2,1)</td>
<td>Cell (2,2)</td>
</tr>
<tr>
<td>Cell (3,1)</td>
<td>Cell (3,2)</td>
</tr>
</table>
ここでは、ほとんどのテーブルに適用する基本的なスタイルをいくつか紹介します。
table {
border-collapse: collapse;
border-spacing: 0;
}
ベストアンサー1
あなたがしようとしていることを私が信じているのなら、次のようなものが必要になります:
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
問題は、すべてのセルの周囲に「完全な境界線」を設定しているため、表全体に境界線があるように見えることです。
編集: これらの疑似クラスに関する詳細情報はquirksmodeで確認できます。予想どおり、IE のサポートに関してはほとんど絶望的です。