Question

这对我来说毫无意义，但话又说回来，我并没有接近CSS专家（可能甚至不是一个好新手）。

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

As you can see，table-row扩展100％，但table-cell不服从table-layout:fixed。需要展开{{1}}以填充所有可用的table-cell空间。

（旁注，table-row也不起作用。）

请帮忙。非常感谢提前！

HTML

border-collapse: collapse

CSS

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

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。

table-layout：固定不扩展表格单元格内绝对100％宽度表格行（元素不折叠）

1 个答案: