我有一个简单的 html 表,如下所示:
<table>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tbody>
<tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr>
<tr class="even"><td>Value 3</td><td>Value 4</td></tr>
<tr class="odd"><td>Value 5</td><td>Value 6</td></tr>
<tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr>
</tbody>
</table>
我想按以下方式设计它:
- 带有框阴影的标题行
- 标题行和第一个正文行之间的空白
我尝试过不同的事情:
table {
/* collapsed, because the bottom shadow on thead tr is hidden otherwise */
border-collapse: collapse;
}
/* Shadow on the header row*/
thead tr { box-shadow: 0 1px 10px #000000; }
/* Background colors defined on table cells */
th { background-color: #ccc; }
tr.even td { background-color: yellow; }
tr.odd td { background-color: orange; }
/* I would like spacing between thead tr and tr.first-row */
tr.first-row {
/* This doesn't work because of border-collapse */
/*border-top: 2em solid white;*/
}
tr.first-row td {
/* This doesn't work because of border-collapse */
/*border-top: 2em solid white;*/
/* This doesn't work because of the td background-color */
/*padding-top: 2em;*/
/* Margin is not a valid property on table cells */
/*margin-top: 2em;*/
}
也可以看看:http://labcss.net/#8AVUF http://labcss.net/#8AVUF
有人对我如何做到这一点有任何建议吗?或者达到相同的视觉效果(即 bod-shadow + 间距)?
我想我有这个fiddle http://jsfiddle.net/nXkeZ/我更新了yours http://labcss.net/#8AVUF:
tbody:before {
content: "-";
display: block;
line-height: 1em;
color: transparent;
}
EDIT更好更简单:
tbody:before {
content:"@";
display:block;
line-height:10px;
text-indent:-99999px;
}
这样文字就真的看不见了
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)