3

各セル間に 4 ピクセル程度のスペースが必要です。灰色のヘッダーには、灰色のブロックではなくスペースを入れたいと思います。いろいろ試してみました (background-clip:padding-box; padding: 14px; margin など) が、div テーブルのセル間に数ピクセルを配置する方法がわかりませんでした。どうすればいいですか？

問題のデモhttp://jsfiddle.net/EJBnm/

<div class="TableBox">
    <div>
        <div>Head</div> <div>Bigger Head</div> <div>Medium</div>
    </div>
    <div>
        <div>First</div> <div>Second</div> <div>Third</div>
    </div>
    <div>
        <div>First</div> <div>Second</div> <div>Third</div>
    </div>
    <div>
        <div>First</div> <div>Second</div> <div>Third</div>
    </div>
</div>

CSS:

.TableBox {display: table;}
.TableBox > div {display: table-row; border-spacing: 5px}
.TableBox > div >div {display: table-cell;  margin: 4px;}
.TableBox > div:nth-child(even){ color: red; }
.TableBox > div:nth-child(1){  background-color: #666666; color:white; border-spacing: 15px; background-clip:padding-box; padding: 14px; margin:0 20px}
4

2 に答える 2

6

あなたの代わりにあなたのクラスに追加border-spacing: 4px;してください.TableBox<tr>

フィドル: http://jsfiddle.net/EJBnm/1/

于 2013-03-01T22:32:28.513 に答える
0

マージンの代わりに透明 (または白い境界線) を使用できます: http://jsfiddle.net/jfsWc/

.TableBox > div >div {display: table-cell;  border:4px solid transparent}
于 2013-03-01T22:34:35.007 に答える