表格布局:修复了绝对宽度为 100% 的表格行内不展开表格单元格的问题(元素也不会折叠)

Question

这对我来说毫无意义，但话又说回来，我与CSS专家相差无几（甚至可能不是一个好的新手）。

我正在使用relative/absolute因为我使用的是来自大型表的动态分页表。 我这样做是为了允许用户快速浏览数据，而不会使客户端过载。

如您所见，table-row扩展了 100%，但table-cell不服从table-layout:fixed。 需要扩展table-cell以填充所有可用的table-row空间。

（旁注，border-collapse: collapse也不起作用。

请帮忙。 提前非常感谢！

.HTML

<div class="gridTable">
    <div class="gridRow">
        <div class="gridCell">a</div>
        <div class="gridCell">JKL;</div>    
        <div class="gridCell">Jb</div>  
    </div>
</div>

.CSS

.gridTable{
display:table;
table-layout:fixed;
position:relative;
border-collapse: collapse;
}
.gridHeaderRow{
top:0px;
}
.gridRow, .gridHeaderRow{
display:table-row;
position:absolute;
}
.gridCell{
display:table-cell;
}
.gridTable, .gridRow, .gridHeaderRow{
width:100%;
}
.gridTable, .gridTable *{
border-collapse:collapse;
}
.gridTable div{
border-color:black;
border-width:1px;
border-style:solid;
}

Answer 1

我从行规则中删除了绝对位置，它对我有用（铬，火狐）

.gridRow, .gridHeaderRow{
  display:table-row;
}

如果你想要一个固定的标题，你可以像这样分隔标题：

<div class="gridTableBox">
    <div class="gridTable gridHeaderTable">
        <div class="gridRow">
            <div class="gridCell">T1</div>
            <div class="gridCell">T2</div>
            <div class="gridCell">T3</div>
        </div>
    </div>
    <div class="gridTable gridBody">
        <div class="gridRow">
            <div class="gridCell">a</div>
            <div class="gridCell">JKL;</div>
            <div class="gridCell">Jb</div>
        </div>
    </div>
</div>

现在你可以给gridHeaderTablediv一个绝对的正位，而不会破坏表布局。

更新的小提琴在这里。