H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】div包裹的table,table的宽度超出了的宽度,出现的滚动条的在windows下无法拖动

问题描述

div包裹的table,table的宽度超出了的宽度,出现的滚动条的在windows下无法拖动

问题出现的环境背景及自己尝试过哪些方法

试过
1.table{table-layout : fixed ; }
2.table要给它设定一个父级div,并且设置父级div的属性
overflow:auto;display:block。
设置table的属性
min-width:100%
设置table td的属性:
min-width:50px
都不行。

回答:

1.父级div是否设置了宽度,只有设置了宽度且滚动条在div内才是你想要控制的滚动
2.仅凭你说的这些属性不知道滚动条怎么不能动,可以贴一下代码?
3.横向需要滚动条的话必须设置table的确定宽度

做了一个demo:

.table{
    table-layout:fixed;
    width: 1000px;
    border: 1px solid #ccc;
}

.table td{
    border: 1px solid #ccc;
}

.wrapper{
    width:500px;
    height: 500px;
    overflow: auto;
    border: 1px solid #000;
}

<div class="wrapper">
    <table class="table">
        <tr>
            <td style="width:200px;">title</td>
            <td>title title title</td>
            <td>title</td>
            <td>title</td>
            <td>title</td>
            <td>title</td>
            <td>title</td>
            <td>title</td>
            <td>title</td>
            <td>title</td>
        </tr>
        <tr>
            <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>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
        </tr>
        <tr>
            <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>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
        </tr>
        <tr>
            <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>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
            <td>问题出现的环境背景及自己尝试过哪些方法</td>
        </tr>
    </table>
</div>

跟你的描述应该比较一致,你看下你的样式问题出在何处了

本文地址:H5W3 » 【Web前端问题】div包裹的table,table的宽度超出了的宽度,出现的滚动条的在windows下无法拖动

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址