css - Bootstrap 表 - 有两行的行

Question

是否可以创建一个 bootstrap 表，它仍然是“表”，并且一行中有两行(请参见随附的图像)，同时仍保持列与“thead”对齐。

我不想用 div 制作它，也许有一些简单的方法可以将它制作成表格，但我没有看到。我还想实现“条纹类”样式，以便第一行为白色，第二行为灰色等。如果没有数据，我还应该能够隐藏额外的行(“其他一些文本”)，同时仍然保留第一行(“内容，内容”)。

Answer 1

我建议看一下如何标记表格 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>