站内搜索:
首页 >> 前端 >> 内容
html、jsp中的table标签如何添加横向滚动条?

时间:2018/3/14 13:40:21

有时候table标签会有很多列,这样会把列的宽度压缩,变的非常不美观,也不好浏览,例如这样

html、jsp中的table标签如何添加横向滚动条?

<body>  
    <table border="1" width="600px" height="120px" align="center">  
            <tr>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
            </tr>  
            <tr>  
                <td>杨争</td>  
                <td>25</td>  
                <td>男</td>  
            </tr>  
        </table>  

这时我们需要在下面添加一个横向滚动条来方便浏览

html、jsp中的table标签如何添加横向滚动条?

该如何实现呢,我们用一个p标签把table标签包裹起来,设置属性style="overflow-x:scroll",并把table标签的宽度属性设为3000px 就可以了,代码如下:

<body>  
    <p style="overflow: auto; width: 100%;">  
        <table border="1" width="3000px" height="120px" align="center">  
            <tr>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
                <td>姓名</td>  
                <td>年龄</td>  
                <td>性别</td>  
            </tr>  
            <tr>  
                <td>杨争</td>  
                <td>25</td>  
                <td>男</td>  
            </tr>  
        </table>  
    </p>  
</body>  

  • 上一篇:webpack打包之后,文件过大的问题怎么解决?
  • 下一篇:ES6解构赋值使用介绍详解
  • 返回顶部