CSS拼图:表标题的绝对位置
CSS拼图:表标题的绝对位置
提问于 2012-06-04 10:20:38
HTML结构
我有以下html结构：--这是一个固定的结构，我不能编辑
<div class="separator"></div>
<table class="myClass">
<thead>
<tr>
<th>title1</th>
<th>title2</th>
</tr>
</thead>
...
</table>
<div class="separator"></div>CSS
第一个和最后一个div是css为：
.separator {
height: 20px;
background-color: gray;
}注意，分隔符是复杂的小部件，不仅仅是设计(我有意简化了示例)
问题所在
我希望将表头放在第一个分隔符之前，但是表主体必须保持在两个分隔符之间。
我试过的
- 下面是用于测试的初始操作：http://jsfiddle.net/prhgW/1/
- 我尝试定位绝对的头标签并使用负的顶部值，但是当这样做时，头的宽度小于表的100%，因此列标题与列值的位置不一致。小提琴：http://jsfiddle.net/prhgW/2/
- 我还尝试将宽度设置为100%，但tr标记不遵循该规则：http://jsfiddle.net/prhgW/3/
附加规则
- 我想避免固定宽度/高度的表或任何元素(所以，绝对定位一切都是不可接受的解决方案)。
- 我想要跨浏览器的兼容性
- 避免javascript修复(纯css更好)
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-06-04 12:03:25
这适用于你的问题吗？
http://jsfiddle.net/prhgW/16/
我在<th>下面添加了一些空间，并将第一个分隔符向下移动。如果您知道分隔符和<th>的高度，这是可行的。
Stack Overflow用户
发布于 2012-06-04 12:21:43
我一直在用纯CSS玩这个，这是我的叉形小提琴。
基本上，我使用直接同级组合器.separator + .myClass来针对分隔符后面的表。然后，我将整个表向上移动，使标题在分隔符的上方排列。这个移动是由一个相同的margin-bottom来补偿的，所以表下面的内容整齐地跟随着表。最后，我在thead中的标头单元格上添加了一些填充，以将tbody推到分隔符下面。
可能的注意事项：
- 分离器的高度需要固定和知道。这可能不是什么大问题。
- 标题的高度必须是固定的和已知的。我使用
1em作为缺省值。 - 如果分隔符上方有内容，则表可能会重叠。这是问题的内在原因:您不能在分隔符上有条件地应用更多的填充。可以以分隔符后面的表为目标，但不能针对后面跟着表的分隔符。同级组合器只适用于前一个同级的元素，而不是相反的。
Stack Overflow用户
发布于 2012-06-04 11:24:33
如果您只需要在表标题下面和最后一行下面画一条灰色行，则可以使用css边框属性设置样式，如此处所示
http://jsfiddle.net/vzGtF/
我已经使用这些类删除了分离器类和div。
希望能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10879728
复制相关文章
相似问题
腾讯云开发者
