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でのみ、テーブルのセルに境界線がありません。

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

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

table { border-collapse:collapse }

いくつかのCSSを追加します：

td, th {
   border:none;
}

次のように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;
}

境界線を削除するには、次のようにcssを使用します。

td {
 border-style : hidden!important;
}

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

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

追加することもできます

table td { border:0; }

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

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

上記の提案を試した後、私にとってうまくいったのは、子テーマのstyle.cssの次のセクションでborder属性を「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;
}

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

bordersをクリアした後でも時々。

その理由は、の中に画像がありtd、画像display:blockを与えることでそれが解決されるからです。