web-dev-qa-db-ja.com

CSS - 表の内側だけの枠線

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

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;
}
htmlcssxhtmlhtml-tableborder
184
Richard Knop

自分がやろうとしていると私が信じていることをやっているのなら、もう少し以下のようなものが必要です。

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 Demo

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

乾杯。

編集：これらの疑似クラスに関するもう少し情報が quirksmode にあり、そして予想通り、あなたはほとんどS.O.Lです。 IEサポートに関して。

193
theIV

これは私のために働く：

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'を持つボーダーは他のすべての衝突するボーダーよりも優先されます。この値を持つ境界線は、この位置にあるすべての境界線を非表示にします。

181
anthonyrisinger

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

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

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/ja-jp/library/cc351024（VS.85）.aspx

11
Crisboot

通常のテーブルマークアップの場合、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

10
dalgard

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

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

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

のコード： HTML CODE TUTORIAL

3
TwoFaceZ

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

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

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
Brian