如何在不破坏的情况下添加容器table

Question

我用 div 创建了一个 table。第一列得到了整个 table 的标题。因为有很多行，所以我想在页面中列出它。所以我把一个容器放在我想要作为页面的每个部分之上。像这样：

<div class="table">    
    <div class="tableRow">
        <div class="tableCell">1</div>
        <div class="tableCell">2</div>
        <div class="tableCell">3</div>
    </div>
    <div class="page1">
        <div class="tableRow">
            <div class="tableCell">111111</div>
            <div class="tableCell">222222</div>
            <div class="tableCell">333333</div>
        </div>
    </div>
    <div class="page2">
        <div class="tableRow">
            <div class="tableCell">111111</div>
            <div class="tableCell">222222</div>
            <div class="tableCell">333333</div>
        </div>
    </div>
</div>

如果我将其用作 table 每个页面都会进入第一行。

我怎么能让 CSS 忽略我的 pagecontainer？

如果这个问题已经被问到，我真的很抱歉，但我真的不知道如何更好地描述它或者我必须寻找什么。

Answer 1

在包装器上使用 display: table-row-group;。这将使它们表现得像 tbody 元素（参见 docs）。

例如：

.table {
    display: table;
    border: 1px solid black;
    padding: 10px;
}
.tableRowGroup {
    display: table-row-group;
}
.tableRow {
    display: table-row;
}
.tableCell {
    display: table-cell;
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

<div class="table">    
    <div class="tableRow">
        <div class="tableCell">1</div>
        <div class="tableCell">2</div>
        <div class="tableCell">3</div>
    </div>
    <div class="page1 tableRowGroup">
        <div class="tableRow">
            <div class="tableCell">111111</div>
            <div class="tableCell">222222</div>
            <div class="tableCell">333333</div>
        </div>
    </div>
    <div class="page2 tableRowGroup">
        <div class="tableRow">
            <div class="tableCell">111111</div>
            <div class="tableCell">222222</div>
            <div class="tableCell">333333</div>
        </div>
    </div>
</div>

Here a fiddle.

如何在不破坏的情况下添加容器table

How to add container without destroying table

html

css-tables