3

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

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

问题

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

我试过的

  1. 这是用于测试的初始 jsfiddle：http: //jsfiddle.net/prhgW/1/

  2. 我试图定位绝对的 thead 标签并使用负的顶部值，但是这样做时，thead 的宽度小于表格的 100%，因此列标题与列值有关。小提琴：http: //jsfiddle.net/prhgW/2/

  3. 我也尝试将宽度设置为 100%，但 tr 标签不遵循该规则：http: //jsfiddle.net/prhgW/3/

附加规则

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

4 回答 4

2

这适用于您的问题吗？

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

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

于 2012-06-04T12:03:25.427 回答
2

我一直在用纯 CSS 玩弄这个，这是我的分叉小提琴。

基本上，我使用直接兄弟组合.separator + .myClass器来定位分隔符后面的表。然后我将整个表格向上移动，使标题在分隔符上方对齐。这一举动得到了相同的补偿，margin-bottom因此表格下方的内容整齐地跟随表格。最后，我在标题单元格上放置了一些填充，thead以将其推tbody到分隔符下方。

可能的警告：

  • 分隔符高度需要固定且已知。这可能不是太大的问题。
  • 标题的高度需要固定且已知。我1em默认使用。
  • 如果分隔符正上方有内容，则可能会被表格重叠。这是问题所固有的：您不能有条件地对分隔符应用更多填充。您可以定位分隔符后面的表格，但不能定位后面跟着表格的分隔符。兄弟组合器仅适用于前一个兄弟之后的元素，反之则不行。
于 2012-06-04T12:21:43.170 回答
0

如果您想要的只是表格标题下方和最后一行下方的灰线，则可以使用 css 边框属性设置样式，如下所示

http://jsfiddle.net/vzGtF/

我已经使用这些类删除了分隔符类和 div。

希望有帮助。

于 2012-06-04T11:24:33.407 回答
0

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

<script>
$(document).ready(function(){
$('.myClass thead').append('<tr><td class="separator" colspan=2></td><tr>');
});
</script>
于 2012-06-04T11:51:46.580 回答