html - 带有宽底列的 Bootstrap html 表格

Question

我需要做这样的表格(在图片上)。

但是做bootstrap table很重要，所以你在图片上看到的只能有3个表格行，不能有6个，因为我要用style

table class="table table-striped table-hover"

这可能吗？

Answer 1

colspan 和 rowspan 属性应该可以解决问题。

试试这个代码:

<div class="table-responsive" style='width:50%'>
    <table class="table table-striped table-hover">
        <tr>
            <td rowspan="3">Name</td>
            <td>Sex</td>
            <td>Age</td>
        </tr>
        <tr>
            <td colspan="2">Junmar Jose</td>
        </tr>
        <tr>
            <td colspan="2">Weslie Andrea Lavita</td>
        </tr>
        <tr>
            <td rowspan="3">Name</td>
            <td>Sex</td>
            <td>Age</td>
        </tr>
        <tr>
            <td colspan="2">Junmar Jose</td>
        </tr>
        <tr>
            <td colspan="2">Weslie Andrea Lavita</td>
        </tr>
    </table>
</div>

这是输出的屏幕截图:

这只是一个虚拟数据，用于显示列和行是如何分开的。

希望对您有所帮助!祝你好运!