我希望每个单元之间有 4 个左右的像素空间。我希望灰色标题有空格而不是一块灰色。我尝试尝试(background-clip:padding-box;padding:14px;margin等),但无法弄清楚如何在div表中的单元格之间放置一些像素。我该怎么做呢?
问题演示http://jsfiddle.net/EJBnm/ 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}
Add border-spacing: 4px;
给你的.TableBox
类而不是你的<tr>
Fiddle: http://jsfiddle.net/EJBnm/1/ http://jsfiddle.net/EJBnm/1/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)