2

私のウェブページは、左と右の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     |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
|                    :                      |
---------------------------------------------

もちろん、2つの別々のテーブルを使用することもできますが、私の場合はいくつかの理由で機能しません。

コード：

<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 に答える