How to add container without destroying table

Question

I created a table out of divs. The first column got the captions for the whole table. Because of having a lot of lines I wanted to list it in pages. So I put a container above every part I wanted as a page. Like this:

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

If I use this as a table every page gets into the first row.

How could I let CSS ignore my pagecontainer?

I'm really sorry if this question has already been asked but I really don't know how to describe it better or what I have to look for.

Answer 1

Use display: table-row-group; on your wrappers. This will make them behave like tbody elements (see the docs).

For example:

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