html - 表中的换行符

Question

我的网页分为左右两栏。在右栏中，我有一个水平方向很长的表格，因此它放不下屏幕(请参见下面的插图 3)。我唯一能想到的就是将表格分成几行(见下面的插图 2)。

因此我想在这个表的中间换行，在第 4 个 th 和 td 之后。

在第 5 个 th 和 td 单元格之后用 tr 拆分并不能解决问题，因为它会将 ths 堆叠在彼此下面，在它们下面堆叠 tds(请参见下面的插图 1)。

插图1:

th1 th2 th3 th4
th5 th6 th7 th8
td1 td2 td3 td4 <- tds
td5 td6 td7 td8 <- tds

插图2(我想要的):

th1 th2 th3 th4
td1 td2 td3 td4 <- tds

th5 th6 th7 th8
td5 td6 td7 td8 <- tds

插图 3:

问题:

---------------------------------------------
|                    :                      |
|                    :                      |
|                    :   Header1  Header2   Header3   Header4
|                    :     1        12      | 40         5
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
---------------------------------------------

期望的输出:

---------------------------------------------
|                    :                      |
|                    :                      |
|                    :   Header1  Header2   |
|                    :     1        12      |
|                    :                      |
|                    :   Header3   Header4  |
|                    :     40         5     |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
---------------------------------------------

当然，我可以使用两个单独的表，但由于多种原因，这对我来说行不通。

代码:

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th> // Line break
            <th>Header 5</th>
            <th>Header 6</th>
            <th>Header 7</th>
            <th>Header 8</th>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td>Foo 1</td>
            <td>Foo 2</td>
            <td>Foo 3</td>
            <td>Foo 4</td> // Line break
            <td>Foo 5</td>
            <td>Foo 6</td>
            <td>Foo 7</td>
            <td>Foo 8</td>
        </tr>
    </tbody>
</table>

如何实现？

Here's a fiddle to play with <-------- !

Answer 1

将 div 与 float: left 一起使用，如下所示:

<div class="column">
    <div class="header">
        header 1
    </div>
    <div class="item">
        row 1, col 1
    </div>
    <div class="item">
        row 2, col 1
    </div>
</div>
<div class="column">
    <div class="header">
        header 2
    </div>
    <div class="item">
        row 1, col 2
    </div>
    <div class="item">
        row 2, col 2
    </div>
</div>
<div class="column">
    <div class="header">
        header 3
    </div>
    <div class="item">
        row 1, col 3
    </div>
    <div class="item">
        row 2, col 3
    </div>
</div>

CSS:

.column {
    float: left;
    width: 100px;
}
.column>.header {
    font-weight: bold;
}