具有宽底栏的Bootstrap 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>

以下是输出的屏幕截图：

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

希望这有帮助！古德勒克！