web-dev-qa-db-ja.com

テーブルセル間の間隔の制御

私は、各セルの間に背景色があり、それらの間に空白があるテーブルを作成しようとしています。しかし、私はこれを行うのに問題があるようです。

tdマージンを設定しようとしましたが、効果がないようです。

table.myclass td {
    background-color: Lime;
    margin: 12px 12px 12px 12px;
}​

パディングで同じことをすれば機能しますが、セル間の間隔がありません。

誰かがこれを手伝ってくれますか？

jsFiddle： http://jsfiddle.net/BfBSM/

htmlcsscss-tables
53
Jonathan Wood

セル間の間隔を設定するには、table要素で border-spacing プロパティを使用します。

border-collapse がseparateに設定されていることを確認してください（または、各セルの間に間隔を空けることができる個別の境界線ではなく、各セル間に単一の境界線があります）。

77
Quentin

これを確認してください fiddle 。ボーダー折りたたみとボーダー間隔の使用を検討する必要があります。 IEにはいくつかの癖があります（通常どおり）。これは 回答 から この質問 に基づいています。

HTML：

<table class="test">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>​

CSS：

table.test td {
    background-color: Lime;
    margin: 12px 12px 12px 12px;
    padding: 12px 12px 12px 12px;
}
table.test {
    border-collapse: separate;
    border-spacing: 10px;
    *border-collapse: expression('separate', cellSpacing = '10px');
}
19
Buggabill

仕事を終わらせるには、

<table cellspacing=12>

物事を成し遂げるよりもむしろ「正しい」場合は、代わりにCSSプロパティborder-spacingを使用できます。これは一部のブラウザでサポートされています。

3
Jukka K. Korpela
table.test td {
    background-color: Lime;
    padding: 12px;
    border:2px solid #fff;border-collapse:separate;
}
3
Web Designer cum Promoter

表のセル間にスペースを取得するには、border-collapseとborder-spacingを使用します。 QQpingで提案されているフローティングセルの使用はお勧めしません。

JSFiddle

1
Halcyon