web-dev-qa-db-ja.com

CSSを使用してテーブルの外側の境界線の色をセルの境界線の色と異なるようにする

CSSを使用してテーブルの外側の境界線の色を設定したいのですが、内側のセルの境界線の色は異なります...

私はこのようなものを作成しました：

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

table td {
     border: 1px solid red;
}

問題は、次のようにテーブルの色が変化して赤くなることです。 http://jsfiddle.net/JaF5h/

テーブルのボーダー幅が2pxに拡大されている場合、機能します： http://jsfiddle.net/rYCrp/

私はCSSとクロスブラウザの問題を長い間扱ってきました...これが私がそのような何かに直面したのは初めてであり、私は完全に行き詰まっています...何をすべきかわからない！

Border-width：1pxでそれを修正する方法を知っている人はいますか？

cssbordercss-tables
17
Ahmad Alfy

私は次のように隣接するセレクターを使用してこれを達成します：

table {
    border: 1px solid #000;
}

tr {
    border-top: 1px solid #000;
}

tr + tr {
    border-top: 1px solid red;
}

td {
    border-left: 1px solid #000;
}

td + td {
    border-left: 1px solid red;
}

これは少し繰り返しですが、最初の行と列の上部と左側の境界線をそれぞれ設定し、「内部」の行とセルを赤で上書きすることにより、効果を実現しています。

IE6は隣接するセレクターを認識しないため、もちろんこれは機能しません。

http://jsfiddle.net/JaF5h/36/

15
ajcw

これを試して：

tbody { display:block; margin: -1px; }
7
Atari

以前の回答では、これを完全に解決できませんでした。受け入れられた回答では、内部境界線が外部テーブル境界線と重なることができます。いくつかの実験の後、私は次の解決策を思いつきました。

テーブルの折りたたみスタイルを設定して、内側の境界を外側の境界と重複しないように分離します。そこから余分な境界線と二重の境界線が取り除かれます。

HTML：

<table>
<tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
</tr>
 <tr>
     <td>Content</td>
     <td>Content</td>
     <td>Content</td>
</tr>
 <tr>
     <td>Content</td>
     <td>Content</td>
     <td>Content</td>
</tr>

[〜＃〜] css [〜＃〜]

table {
    border: 1px solid black;
    border-collapse: separate;
    border-spacing: 0;
}
table td, table th {
    border: 1px solid red;
}

table tr td {
    border-right: 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{
    border-top: 0;
}

https://jsfiddle.net/o5ar81xg/

5
Mike

テーブルを囲むdivを作成します。テーブルの外側のdiv境界線の色を設定します。テーブルをボーダーコラプスしないでください。代わりに、セルを分離して、下のdivの（内側の境界）背景色を表示します。次に、背景セルを選択した背景色に設定します。

[〜＃〜] html [〜＃〜]：

<div id="tableDiv">
    <table id="studentInformationTable">
        <!-- Add your rows, headers, and cells here -->
    </table>
</div>

[〜＃〜] css [〜＃〜]：

#tableDiv {
    margin-left: 40px;
    margin-right: 40px;
    border: 2px solid brown;
    background-color: white;
}

table {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-color: brown;
}

td, th {
    background-color: #e7e1d3;
    padding: 10px 25px 10px 25px;
    margin: 0px;
}
2
Rick Penabella

それが私のために働いた次を試してください：

table {
    border-collapse: collapse;
    border: solid #000; 
}

table td {
    border: 1px solid red;
}
0
Ritesh