鹤茸 2021-06-20 17:33 采纳率: 25%
浏览 143
已采纳

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

 

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2021-06-20 18:01
    关注

    大概写了个前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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?