テーブルの内側のみに境界線を適用するにはどうすればよいですか？

195

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

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

— リチャードノップ
ソース

セルの周りにのみ境界線が表示されます。各セルには境界線があるため、テーブルには境界線があるように見えます。多分私は質問をしませんか？

— Chetan S

3

内部ボーダーとも呼ばれます。

— メカニカルカタツムリ

203

あなたがやろうとしていると私が信じていることをしているなら、次のようなものが必要になります：

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です。

— theIV
ソース

このような単純なテーブルでは、次の兄弟コンビネーターを使用して疑似クラスの使用を回避するはるかに短い解決策があります。私の答えを見てください。

— ダルガード2014

1

@theIV、これは5年以上前に回答されていますが、これより「新しい」/「より効率的な」方法はありますか？

— jbutler483 2014年

テーブルの最初の列で行スパンを使用する場合は機能しません。

— ジャック

191

これは私にとってはうまくいきます：

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

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

例を見る...

FF 3.6およびChromium 5.0でテストされたIEはサポートを欠いています。W3Cから：

「非表示」の「ボーダースタイル」を持つボーダーは、他のすべての競合するボーダーよりも優先されます。この値の境界線は、この場所のすべての境界線を抑制します。

— Anthonyrisinger
ソース

1

テーブルのボーダーが必要ない限り、これは間違いなく最もエレガントなソリューションです。

— cjroth 2011

42

あなたが望む効果を達成するための非常に簡単な方法の例：

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

— ジョニー
ソース

13

"MAGIC"について説明： frameとrulesあるOLD（ないHTML5） tableの属性（あなたの代わりにCSSを使用する必要があります）。表frameの外枠のどの部分を表示voidする必要があるかを示します- すべての外枠を非表示にすることを意味します... 表rulesの内枠のどの部分を表示allする必要があるかを意味します- すべてを意味します...明らかに...これを使用しないでくださいHTML3は狂信的です... :)

— jave.web

1

ボーダーのようなものを追加：1pxの黒一色は、テーブルの外側の境界が確実にボーダーを取得するようにします。

— Aaron Liu

1

2020年の魅力のように動作し、私が読んでいたWebサイトのばかばかしい間隔のテーブルに読みやすさをすばやく追加しました。実際、これだけで国境は十分でした：rules = "all"

— Edoardo Facchinelli

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で学習できます。

— クリスブーツ
ソース

これは素晴らしいソリューションです。ただし、テーブルセルの1つに別のテーブルがあり、内側の境界線を表示したい場合は、「内部」テーブル用に別のCSS行のセットが必要です

— Michael Biermann

10

通常のテーブルマークアップの場合、IE 7以下を除くBrowserStack上のすべてのデバイス/ブラウザーで機能する短いソリューションを次に示します。

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

IE 7のサポートのために、これを追加します。

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

テストケースはここにあります：http : //codepen.io/dalgard/pen/wmcdE

— ダルガード
ソース

すばらしい-これは、表に別の境界線を設定することも可能にするため、単に表示しないだけではありません。

— jsbueno 2015

5

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

table {
 border:0;
}

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

編集：

試しましたが、テーブルの枠はありません。しかし、テーブルの境界線を設定すると、border-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>

— ルフィヌス
ソース

いいえ、うまくいきませんでした。最初の投稿を編集します。

— Richard Knop、

3

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

コード：HTMLコードチュートリアル

— TwoFaceZ
ソース

0

これで各セルに境界線を追加します：

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/

— ブライアン
ソース

0

tbody / thead / tfootおよびtd / thの任意の組み合わせで機能します

table.inner-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}

<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>

スニペットを展開

— user1119279
ソース