Question

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

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

如果我将其用作表格，则每个页面都会进入第一行。

我怎么能让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.

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

1 个答案: