围绕表中特定行的边框？
Kyl*_*nin 119 html css border css-tables
我正在尝试设计一些HTML/CSS,它可以在表格中的特定行周围放置边框.是的,我知道我不是真的应该使用表格进行布局,但我不知道足够的CSS来完全替换它.
无论如何,我有一个包含多行和多列的表,有些与rowspan和colspan合并,我想在表的各个部分周围放一个简单的边框.目前,我正在使用4个单独的CSS类(顶部,底部,左侧,右侧),我分别附加到表<td>的顶部,底部,左侧和右侧的单元格.
.top {
border-top: thin solid;
border-color: black;
}
.bottom {
border-bottom: thin solid;
border-color: black;
}
.left {
border-left: thin solid;
border-color: black;
}
.right {
border-right: thin solid;
border-color: black;
}<html>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td class="top left">one</td>
<td class="top right">two</td>
</tr>
<tr>
<td class="bottom left">three</td>
<td class="bottom right">four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr>
<td class="top bottom left right" colspan="2">hello</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
</html>有没有更简单的方法来做我想要的？我尝试将顶部和底部应用于a <tr>但它不起作用.(ps我是CSS的新手,所以我可能错过了一个非常基本的解决方案.)
注意:我需要有多个有边框的部分.基本思想是拥有多个边界集群,每个集群包含多行.
Kyl*_*nin 53
谢谢所有回复的人!我已经尝试了这里提出的所有解决方案,并且我已经在互联网上搜索了更多其他可能的解决方案,我想我找到了一个有前途的解决方案:
tr.top td {
border-top: thin solid black;
}
tr.bottom td {
border-bottom: thin solid black;
}
tr.row td:first-child {
border-left: thin solid black;
}
tr.row td:last-child {
border-right: thin solid black;
}<html>
<head>
</head>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr class="top row">
<td>one</td>
<td>two</td>
</tr>
<tr class="bottom row">
<td>three</td>
<td>four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr class="top bottom row">
<td colspan="2">hello</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
</body>
</html>输出:
而不必到补充的top,bottom,left,和right班级的每一个<td>,都是我所要做的就是添加top row到顶部<tr>,bottom row至底部<tr>,并且row每一个<tr>之间.这个解决方案有什么问题吗？我应该注意哪些跨平台问题？
Sun*_*ise 36
如果您将border-collapse样式设置collapse为父表,您应该能够设置样式tr:(样式是内联的演示)
<table style="border-collapse: collapse;">
<tr>
<td>No Border</td>
</tr>
<tr style="border:2px solid #f00;">
<td>Border</td>
</tr>
<tr>
<td>No Border</td>
</tr>
</table>
输出:
我也只是在玩这个,这对我来说似乎是最好的选择:
<style>
tr {
display: table; /* this makes borders/margins work */
border: 1px solid black;
margin: 5px;
}
</style>
请注意,这将阻止使用流体/自动列宽,因为单元格将不再与其他行中的对齐,但边框/颜色格式仍然可以正常工作.解决方案是给TR和TD指定一个宽度(px或%).
当然,tr.myClass如果您只想将它应用于某些行,您可以创建选择器.display: table然而,显然不适用于IE 6/7,但可能还有其他黑客(hasLayout？)可能适用于那些.:-(
- 此解决方案不正确:"display:table"将整行放入一个表格单元格中 - 相对于表格的其他行,您将丢失格式.我在Firefox和Chromium中试过这个. (6认同)
| 归档时间： |
|
| 查看次数： |
289395 次 |
| 最近记录： |