怎么用bootstrap 表格画出一行对应多行的效果

Question

 

Answer 1

大概写了个前5行，其他依样子画下葫芦就行了rowspan合并行，开始一行设置rowspan，需要合并多少个子行设置下就行。

帮助到你能点个采纳吗，谢谢~~

 

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.css" type="text/css" rel="stylesheet" />
<style>
    td{vertical-align:middle}
</style>
<table class="table table-bordered">
    <tr><th>序号</th><th>模块</th><th>功能</th><th>子功能</th><th>功能说明</th></tr>
    <tr><td>1</td><td rowspan="4">登录</td><td rowspan="3">采购商登录</td><td rowspan="2">账号登录</td><td>支持账号密码普通验证码</td></tr>
    <tr><td>2</td><td>支持手机验证码登录</td></tr>
    <tr><td>3</td><td>密码找回</td><td>支持收验证码密码找回</td></tr>
    <tr><td>4</td><td>价格查看</td><td>价格显示</td><td>1）商品首页.....<br />2）未登录显示统一...</td></tr>
    <tr><td>5</td><td rowspan="12">首页</td><td>分类导航</td><td>分类导航</td><td>支持导航信息查看<br />移动端底部菜单......</td></tr>
</table>