207

テーブル内にのみ境界線を追加する方法を見つけようとしています。私がする時：

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

9 に答える 9

212

あなたがやろうとしていると私が信じていることをしているなら、次のようなものがもう少し必要になるでしょう:

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 デモ

問題は、すべてのセルの周りに「完全な境界線」を設定しているため、テーブル全体に境界線があるように見えることです。

乾杯。

編集: これらの疑似クラスに関するもう少し詳しい情報はquirksmodeにあります。予想通り、IE サポートに関してはかなり SOL です。

于 2009-08-10T22:05:49.793 に答える
204

これは私のために働く：

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

例を見る ...

FF 3.6 および Chromium 5.0 でテスト済み。IE はサポートされていません。W3Cから:

'hidden' の 'border-style' を持つ境界線は、競合する他のすべての境界線よりも優先されます。この値を持つ境界線は、この位置のすべての境界線を抑制します。

于 2010-07-28T01:02:34.197 に答える
44

目的の効果を達成するための非常に簡単な方法の例:

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>
于 2011-12-07T10:02:22.367 に答える
11

ie7、ie8 との互換性を維持するため、これを行うには最後の子ではなく最初の子を使用することをお勧めします。

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

CSS 2.1 疑似クラスについては、http: //msdn.microsoft.com/en-us/library/cc351024 (VS.85).aspx で学習できます。

于 2010-10-05T15:50:21.847 に答える
4

これはうまくいくはずです：

table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: collapse;
}

編集：

試してみましたが、テーブルの境界線はありません。しかし、テーブルの境界線を設定すると、境界線の折りたたみによって排除されます。

これはテストファイルです：

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<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>

</body>
</html>
于 2009-08-10T21:56:40.047 に答える
3

それはcssなしですべてを行います <TABLE BORDER=1 RULES=ALL FRAME=VOID>

コード元: HTML コード チュートリアル

于 2012-11-08T20:29:39.317 に答える
1

これを使用して各セルに境界線を追加します。

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

最初の行のすべてのセルから上の境界線を削除します。

table > tbody > tr:first-child > td { border-top: 0; }

最初の列のセルから左の境界線を削除します。

table > tbody > tr > td:first-child { border-left: 0; }

最後の列のセルから右の境界線を削除します。

table > tbody > tr > td:last-child { border-right: 0; }

最後の行のセルから下の境界線を削除します。

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

于 2015-01-05T21:15:09.473 に答える