web-dev-qa-db-ja.com

Bootstrap table-2行の行

bootstrapテーブルを作成することは可能ですか？これは引き続き「テーブル」であり、列を「thead」に揃えたまま、1行に2行あります（同封の画像を参照）。

enter image description here

Divで作成したくないので、テーブルとして作成する簡単な方法があるかもしれませんが、表示されません。最初の行が白、2番目の行が灰色などになるように、「ストライプクラス」のスタイルも実現したいと思います。データがない場合は、余分な行（「その他のテキスト」）を非表示にしながら、データを保持できるようにする必要があります。最初の行（「コンテンツ、コンテンツ」）。

csstwitter-bootstraphtml-tablerowmultirow
6
L.V

テーブルをマークアップする方法を確認することをお勧めします https://developer.mozilla.org/de/docs/Web/HTML/Element/table

あなたの場合、rowspanが便利になるかもしれません

    table {
      border-collapse: collapse;
    }
    table,
    tr,
    th,
    td {
      border: 1px solid #000;
    }

    th {
      padding: 1ex;
      background: #ccc;
    }
    td {
      padding: 1ex;
    }
    .divide td {
      border-top: 3px solid;
    }
<table>
    <tr>
        <th>head</th>
        <th>title</th>
        <th>title</th>
        <th>title</th>
        <th></th>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">white</td>
    </tr>
    <tr>
        <td colspan="4">
            lorem ipsum
        </td>
    </tr>
    <tr class="divide">
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">gray</td>
    </tr>
    <tr>
        <td colspan="4">
            lorem ipsum
        </td>
    </tr>
    <tr class="divide">
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>white</td>
    </tr>
    <tr class="divide">
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">gray</td>
    </tr>
    <tr>
        <td colspan="4">
            lorem ipsum
        </td>
    </tr>
</table>
0
bitstarr