6

各セルの間にパディングがあるテーブルが必要ですが、外側のセルの周り、つまりテーブル自体の周りにはありません。

使用:

border-collapse : separate;
border-spacing  : 0.5em;

以下を使用している間、どこにでもパディングができます：

border-collapse : collapse;

どこにもパディングを与えません。

別のアプローチを試みると、セレクターを使用して水平方向のセル間のみにパディングを取得できます。ただし、マージン、パディング、境界線のルールを無視しているように見えるため、セレクターを使用できません。td + tdtr + trtr

そしてもちろん、プレーンtdセレクターのパディングはすべてのセルに適用され、外側のセルの外縁にも適用されます。

これは、現世代のブラウザーでのみ機能する必要があります。IE 6 または 7 はありません。そして、私は IE 8 でスリープを失うつもりはありませんが、それがうまくいけばいいのですが。

4

2 に答える 2

4

境界線の間隔の代わりにパディングを使用するため、これは完全な解決策ではありません。おそらくそれはあなたの問題のために働くでしょう。

HTML:

<table>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
</table>

そしてCSS：

table {
    border: 1px red solid;
    border-collapse: separate;
}

td {
    background-color: green;
    border: 1px black solid;
    padding: 10px;
}

td:first-child {
    padding-left: 0px;
}

td:last-child {
    padding-right: 0px;
}

tr:first-child td {
    padding-top: 0px;
}

tr:last-child td {
    padding-bottom: 0px;
}

プロデュース:

ここに画像の説明を入力

jsFiddleでも。

于 2011-06-15T05:17:45.307 に答える
-1

マークアップをいじって、行の最初のセルに .first を追加し、最後に .last を追加して、最初と最後の行にも追加して、適切にパディングできますか?

于 2011-06-15T05:16:22.967 に答える