web-dev-qa-db-ja.com

CSSで不要なテーブルセルの境界線を削除する

私には独特でイライラする問題があります。単純なマークアップの場合：

<table>
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

thead、tr、およびtr奇数要素に異なる背景色の値を適用します。問題は、ほとんどのブラウザで、すべてのセルに表の行の色ではない不要な境界線があることです。 Firefox 3.5でのみ、テーブルのセルに境界線がありません。

他の主要なブラウザーでこれらの境界線を削除する方法を知りたいので、表に表示されるのは交互の行の色だけです。

htmlcsshtml-table
76
Bob

これをCSSに追加する必要があります。

table { border-collapse:collapse }
194
Doug Neiner

次のようにHTMLを変更します。

<table border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr><td>1</td><td>2</td><td>3</td></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

（border="0" cellpadding="0" cellspacing="0"を追加しました）

CSSでは、次のことができます。

table {
    border-collapse: collapse;
}
13
Gabriel McAdams

cssを追加します。

td, th {
   border:none;
}
12
Dave Markle

テーブルのcellspacing属性を0に設定します。

また、CSSスタイルborder-spacing: 0を使用できますが、これはIEの古いバージョンをサポートする必要がない場合のみです。

8
SLaks

ボーダーを削除するには、次のようなcssを使用してください：

td {
 border-style : hidden!important;
}
6
Amine_Dev

上記の提案を試した後、私のために働いた唯一のことは、子テーマのstyle.cssの次のセクションでボーダー属性を「0」に変更することでした（それぞれを見つけるために「検索」操作を行います-以下はちょうどですスニペット）：

.comment-content table {
    border-bottom: 1px solid #ddd;

.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}

したがって、その後は次のようになります。

.comment-content table {
    border-bottom: 0;

.comment-content td {
    border-top: 0;
    padding: 6px 10px 6px 0;
}
1
Jessica Escobar

追加することもできます

table td { border:0; }

上記はcellpadding = "0"を設定するのと同等です

デフォルトのブラウザスタイルをリセットするために使用されるDoctypeやCSSに依存するブラウザによって自動的にセルに追加されるパディングを取り除きます

1
falc0n

border: 0px; border-collapse: collapse;のスタイルをテーブル要素に割り当ててみてください。

0
Josh Anderson