html - 具有底部宽列的Bootstrap HTML表

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

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

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

可能吗？

最佳答案

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>

这是输出的屏幕截图：



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

希望这可以帮助！祝好运！

关于html - 具有底部宽列的Bootstrap HTML表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38037170/