1

CSSを使用して、次のように通常のテーブルの外観を変更することは可能ですか？

+-----------+-----------+
| Row1Cell1 | Row1Cell2 |
+-----------+-----------+
| Row2Cell1 | Row2Cell2 |
+-----------+-----------+
| Row3Cell1 | Row3Cell2 |
+-----------+-----------+
| Row4Cell1 | Row4Cell2 |
+-----------+-----------+
| Row5Cell1 | Row5Cell2 |
+-----------+-----------+
| Row6Cell1 | Row6Cell2 |
+-----------+-----------+

これに：

+-----------+-----------+-----------+-----------+
| Row1Cell1 | Row1Cell2 | Row2Cell1 | Row2Cell2 |
+-----------+-----------+-----------+-----------+
| Row3Cell1 | Row3Cell2 | Row4Cell1 | Row4Cell2 |
+-----------+-----------+-----------+-----------+
| Row5Cell1 | Row5Cell2 | Row6Cell1 | Row6Cell2 |
+-----------+-----------+-----------+-----------+

私がやりたい<tr>のは、同じビジュアル行に2つ（またはおそらく3つ）をレンダリングすることです。可能であればJavaScriptを使用せずにこれを実現したいと思います。

オスカーに関して

4

1 に答える 1

3

幅がわからない場合は、次<tr>のように使用できます。

HTML

<table>
    <tbody>
        <tr>
            <td>1 1</td>
            <td>1 2</td>
        </tr>
        <tr>
            <td>2 1</td>
            <td>2 2</td>
        </tr>
        <tr>
            <td>3 1</td>
            <td>3 2</td>
        </tr>
        <!-- more stuff here -->
    </tbody>
</table>

CSS

tr {
    float: left;
}

tr:nth-child(3n+1) {
    clear: left;
}

それは<tr>sを浮かせますが、時々壊れます。:nth-child-selectorを使用して、これがいつ発生するかを制御できます。この場合（:nth-child(3n+1)）は、3行ごとに中断します。2n+12行ごとにブレークを使用し、最終的n+1に最初から元の順序に戻します。これがお役に立てば幸いです。

デモ

購入する前に試してください

注：これはSafari、Chrome、Firefoxでテストしましたが、IEではテストしませんでした。VMを起動する時間がありませんでした。

PS：自分の幅がわかっている場合は、1、2、または3行に水平方向に十分なスペースができるように、テーブル全体の幅を設定する<tr>だけでそれを行うことができます。tr { float: left; }

于 2012-10-29T10:38:02.613 に答える