table横向滚动条怎么做？

我爱编程_编程不爱我 2016-03-08 09:52:43

外层div宽度100%，overflow：scroll
内层table设置每列列宽，总宽超出外层div100%宽度时，table列会自动缩放，自适应，并不能撑开div滚动条，求解如何禁止table列的自适应？
或者table横向滚动条的解决方案？

...全文

8820 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

Sun_yhw 2017-05-17

打赏
举报

谢谢了，版主

我爱编程_编程不爱我 2016-03-09

打赏
举报

引用 3 楼 jikeytang 的回复:

[quote=引用 2 楼 zcqun906572169 的回复:] [quote=引用 1 楼 jikeytang 的回复:] table的外边要写个固定值。


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{ margin:0; padding:0; }
        body{ font:12px/1.125 Arial, Helvetica, sans-serif; background:#fff; }
        .none{ display:none }
        .wrap{ width:1000px;overflow-y:scroll}
    </style>
</head>
<body>
<div class="wrap">
    <table width="1280" border="1">
        <tr>
            <td width="20%">111</td>
            <td>222111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222111</td>
        </tr>
    </table>
</div>
</body>
</html>

感谢版主解答，我忘了还有个没有说，项目table总宽度是变化的，每次查询后显示的表格列数会增加或者减少，我想让他在查询后如果列总宽小于div，则某一列自适应，如果大于div，就像你这样显示滚动条，这样可以实现么[/quote] 那就需要js来干预，并且部分值要写死或者给平均值。


var tab = $('.tab');
var td = tab.find('td');
if(td.length * 300 > 800){ // 300是td的平均值，800是table外div的宽度，如果大于这个就给table一个宽度
    tab[0].width = td.length * 300;
}

[/quote] 好，感谢版主解答

豪情 2016-03-08

打赏
举报

table的外边要写个固定值。


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{ margin:0; padding:0; }
        body{ font:12px/1.125 Arial, Helvetica, sans-serif; background:#fff; }
        .none{ display:none }
        .wrap{ width:1000px;overflow-y:scroll}
    </style>
</head>
<body>
<div class="wrap">
    <table width="1280" border="1">
        <tr>
            <td width="20%">111</td>
            <td>222111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222111</td>
        </tr>
    </table>
</div>
</body>
</html>

豪情 2016-03-08

打赏
举报

引用 2 楼 zcqun906572169 的回复:

[quote=引用 1 楼 jikeytang 的回复:] table的外边要写个固定值。


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{ margin:0; padding:0; }
        body{ font:12px/1.125 Arial, Helvetica, sans-serif; background:#fff; }
        .none{ display:none }
        .wrap{ width:1000px;overflow-y:scroll}
    </style>
</head>
<body>
<div class="wrap">
    <table width="1280" border="1">
        <tr>
            <td width="20%">111</td>
            <td>222111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222111</td>
        </tr>
    </table>
</div>
</body>
</html>


var tab = $('.tab');
var td = tab.find('td');
if(td.length * 300 > 800){ // 300是td的平均值，800是table外div的宽度，如果大于这个就给table一个宽度
    tab[0].width = td.length * 300;
}

我爱编程_编程不爱我 2016-03-08

打赏
举报

引用 1 楼 jikeytang 的回复:

table的外边要写个固定值。


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{ margin:0; padding:0; }
        body{ font:12px/1.125 Arial, Helvetica, sans-serif; background:#fff; }
        .none{ display:none }
        .wrap{ width:1000px;overflow-y:scroll}
    </style>
</head>
<body>
<div class="wrap">
    <table width="1280" border="1">
        <tr>
            <td width="20%">111</td>
            <td>222111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222111</td>
        </tr>
    </table>
</div>
</body>
</html>

感谢版主解答，我忘了还有个没有说，项目table总宽度是变化的，每次查询后显示的表格列数会增加或者减少，我想让他在查询后如果列总宽小于div，则某一列自适应，如果大于div，就像你这样显示滚动条，这样可以实现么