表格布局：固定在绝对 100% 宽度的表格行内不展开表格单元格（元素也不折叠）

Question

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

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

As you can see，table-row 扩展 100%，但 table-cells 不服从 table-layout:fixed。需要 table-cells 扩展以填充所有可用的 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

我从行规则中删除了绝对位置，它对我有用（chrome，firefox）

.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>

现在您可以在不破坏表格布局的情况下为 gridHeaderTable div 提供一个绝对位置。

更新的小提琴是here。