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

 

大概写了个前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>

 

<td rows="2" cols="2">分别是行合并和列合并的

您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632