Question

是否可以创建一个引导表，该表仍然是“表”，并且在一行中有两行（请参见随附的图片），同时仍使列与“ thead”对齐。

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

Answer 1

两年半过去了，Bootstrap 5（截至 2021 年 1 月 7 日仍处于测试阶段）现在看起来在嵌套表的能力方面有更好的解决方案。

https://getbootstrap.com/docs/5.0/content/tables/#nesting

它看起来像是对 bitstarr 提供的答案的微妙但重要的扩展，特别是因为它允许您选择是否要继承父表的样式。

嵌套只是通过确保在一行中包含一个“colspan”值，然后在该行中添加另一个表来实现的。

因此，前两行或您预期的结果（标题和第一行内容）将如下所示：

<table class="table table-striped">
    <thead>
    <tr>
        <th>head</th>
        <th>title</th>
        <th>title</th>
        <th>title</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <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">
            <table class="table mb-0">
                <tr>
                    <td>
                    Some other text that can be as long as a row
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    </tbody>
</table>

Answer 2

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

引导程序表-具有两行的行

2 个答案: