Question

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;
}

请注意，分隔符是复杂的小部件，而不仅仅是设计（我有意简化示例）

问题

我想将表头放在第一个分隔符之前，但是表体必须保留在两个分隔符之间。

我尝试了什么

以下是测试的初始jsfiddle： http://jsfiddle.net/prhgW/1/
我试图将thead标记置于绝对位置并使用负顶部值，但这样做时，thead的宽度小于 100％的表格和列标题都是错误的列值。小提琴：http://jsfiddle.net/prhgW/2/
我也尝试将宽度设置为100％，但tr标签却没有遵循以下规则：http://jsfiddle.net/prhgW/3/

附加规则

我想避免固定宽度/高度的表格或任何元素（因此，绝对定位一切都是不可接受的解决方案）
我想跨浏览器兼容性
避免javascript修复（纯css会更好）

Answer 1

这适用于您的问题吗？

http://jsfiddle.net/prhgW/16/

我在<th>下方添加了一些空格，并将第一个分隔符向下移动。如果您知道分隔符的高度和<th>。

，则此方法有效

Answer 2

我在纯CSS中一直在玩这个，这是我的forked fiddle。

基本上，我使用直接兄弟组合器.separator + .myClass来定位分隔符后的表。然后我将整个桌子向上移动，使标题在分隔符上方排列。此移动使用相同的margin-bottom进行补偿，因此表格下方的内容整齐地跟随表格。最后，我在thead的标题单元格上添加了一些填充，以便将tbody推送到分隔符下方。

可能的警告：

分离器高度需要固定且已知。这可能不是太大的问题。
标题的高度需要固定并且已知。我使用1em作为默认值。
如果分隔符正上方有内容，则表格可能会重叠。这是问题所固有的：您无法有条件地将更多填充应用于分隔符。您可以定位分隔符后面的表，但不能定位一个后跟表的分隔符。兄弟组合器仅适用于前一个兄弟之后的元素，而不是相反。

Answer 3

如果您想要的只是表标题下方和最后一行下方的灰线，您可以使用css border属性设置样式，如此处

http://jsfiddle.net/vzGtF/

我已经使用类删除了seperator类和div。

希望有所帮助。

Answer 4

我使用了一点jquery在表格的标题下方添加一行。

<script>
$(document).ready(function(){
$('.myClass thead').append('<tr><td class="separator" colspan=2></td><tr>');
});
</script>

CSS拼图：表格标题的绝对位置

HTML结构

CSS

问题

我尝试了什么

附加规则

4 个答案: