zoukankan      html  css  js  c++  java
  • html table表格列数太多添加横向滚动条

    HTML的table表格的列数如果太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好。比如下面的情况:

    blob.png

    那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只需要给table外面包一层div,设置width、height 和最重要的 overflow:scroll。完整代码如下:

    <div style="1000px; height:200px; overflow:scroll;">
        <table border="1" rules="all" style="2000px; height:100px; text-align:center">
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>简介</th>
                <th>作者</th>
                <th>库存</th>
                <th>价格</th>
                <th>销量</th>
                <th>备注</th>
                <th>阅读数</th>
                <th>点赞数</th>
                <th>收藏数</th>
                <th>评论数</th>
                <th>发布时间</th>
                <th>修改时间</th>
            </tr>
            <tr>
                <td>1</td>
                <td>这是一篇标题很长的文章用来测试表格的测试标题</td>
                <td>这是一篇标题很长的文章用来测试表格不被太多列挤得变形的描述...</td>
                <td>管理员</td>
                <td>3000</td>
                <td>120.68</td>
                <td>1200</td>
                <td>测试啊测试test</td>
                <td>123</td>
                <td>20</td>
                <td>17</td>
                <td>5</td>
                <td>2018-03-06 12:00:00</td>
                <td>2018-03-07 15:00:00</td>
            </tr>
            <tr>
                <td>1</td>
                <td>这是一篇标题很长的文章用来测试表格的测试标题</td>
                <td>这是一篇标题很长的文章用来测试表格不被太多列挤得变形的描述...</td>
                <td>管理员</td>
                <td>3000</td>
                <td>120.68</td>
                <td>1200</td>
                <td>测试啊测试test</td>
                <td>123</td>
                <td>20</td>
                <td>17</td>
                <td>5</td>
                <td>2018-03-06 12:00:00</td>
                <td>2018-03-07 15:00:00</td>
            </tr>
           
        </table>
    </div>

    运行后的效果如下:

    blob.png

  • 相关阅读:
    小米手机无法连接eclipse调试解决方案
    黏性控件的使用
    快速索引 (对View的自定义)
    侧滑面板(对viewGroup的自定义)
    安卓程序员要拿到5000和1w的薪资,分别需要掌握哪些技术?
    1、话说linux内核
    嵌入式软件工程师面试
    arm汇编之 bne与beq
    不要做浮躁的嵌入式系统工程师
    内核里面writel(readl)是如何实现的
  • 原文地址:https://www.cnblogs.com/rxbook/p/9106467.html
Copyright © 2011-2022 走看看