1. ホーム
  2. ハイパーリンク

[解決済み】テーブルの内側だけボーダーを適用するには?

2022-04-11 06:43:46

質問

テーブルの内側だけにボーダーを付ける方法を考えています。私が行うとき。

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;
}

解決方法は?

もし、あなたがやろうとしていることが、私が考えるようなことであれば、もう少し、このようなものが必要でしょう。

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;
}

jsFiddleデモ

問題は、すべてのセルの周囲に「フルボーダー」を設定しているため、テーブル全体にボーダーがあるように見えてしまうことです。

乾杯

EDIT: これらの擬似クラスに関するもう少し詳しい情報は、以下のサイトにあります。 quirksmode そして、予想通り、IEのサポートという点では、かなりS.O.L.になっています。