具有宽底列的引导 html 表

Question

我需要做这样的桌子（在图片上）。

但重要的是做一个引导表，所以你在图片上看到的只能有3个表格行，而不是6个，因为我想使用样式

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>

这是输出的截图：

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

希望这会有所帮助！祝你好运！