Question

我的网页分为左右两列。在右栏中，我有一个相当长的水平表，因此它不适合屏幕（见下图3）。我唯一能想到的就是将表格分成几行（见下图2）。

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

在第5个和td单元格之后使用tr进行拆分不会起作用，因为它会将它们叠加在彼此之下并且在它们之下（参见下面的插图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＆lt; -------！

Answer 1

使用float: left之类的div：

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

换行表

插图1：

插图2（我想要的）：

插图3：

1 个答案: