2

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

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

如您所见，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;
}
4

1 回答 1

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 提供绝对位置。

更新的小提琴在这里。

于 2013-01-30T19:59:07.750 回答