76

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

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

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

で同じことをするとpadding、それは機能しますが、セル間の間隔がありません。

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

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

4

5 に答える 5

97

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

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

于 2012-09-25T14:56:25.840 に答える
28

このフィドルを確認してください。border-collapseとborder-spacingの使用を確認する必要があります。IEにはいくつかの癖があります（いつものように）。これは、この質問への回答に基づいています。

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');
}
<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>

于 2012-09-25T14:58:11.467 に答える
3 
table.test td {
    background-color: lime;
    padding: 12px;
    border:2px solid #fff;border-collapse:separate;
}
于 2012-09-25T14:58:45.723 に答える
2

仕事を成し遂げるために、

<table cellspacing=12>

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

于 2012-09-25T16:45:39.617 に答える
1

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

JSFiddle

于 2012-09-25T14:59:42.980 に答える