2

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

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

在第 5 个和 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>

怎样才能做到这一点？

这是一个可以玩的小提琴<-------- ！

4

1 回答 1

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;
}
于 2013-01-20T16:48:24.690 回答