div表中的单元格间距 [英] Cell spacing in div table
本文介绍了div表中的单元格间距的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望每个单元格之间有4个左右的像素空间。我希望灰色标题包含空格,而不是灰色块。我试着玩(background-clip:padding-box; padding:14px; margin等),但无法弄清楚如何在div表的单元格之间放置几个像素。我该怎么做?
I'd like the there to be 4 or so pixel space between each cell. I'd like the grey header to have the spaces rather then a block of grey. I tried playing around ( background-clip:padding-box; padding: 14px; margin etc) but couldn't figure out how to put a few pixels between cells in a div table. How do I do this?
问题演示 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}
推荐答案
添加边框间距:4px;
到您的 .TableBox
类,而不是您的< tr>
Add border-spacing: 4px;
to your .TableBox
class instead of your <tr>
提琴: http://jsfiddle.net / EJBnm / 1 /
这篇关于div表中的单元格间距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文