如何实现 table 中单元格有最大宽度并且可以换行，外面加带一个大小固定的带滚动条的div。

我需要做一个带滚动条的列表，
我想用一个table外面包一层带滚动条的div实现,
问题是如果把div设置成带滚动条的话。div包含的 table 的列宽就会被按div的宽度平均分配而不会出现横向的滚动条。一直无法解决所以求救csdn。希望大家给个答案。谢谢。

下面贴出了代码。目前画面是这样的。

图片说明

我想做成下面这个样子

图片说明

以下是目前我写的代码

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>设置表格有滚动条</title>
    <style>
        .ell21 {
            max-width: 100px;
            max-height: 80px;
            word-break: break-all;
            word-wrap: break-word;
            white-space: pre-wrap;
            text-align: left;
            vertical-align: top;
        }
    </style>
</head>

<body>
    <!--<div style=" border: 1px solid #000000; overflow: scroll; white-space: initial; width: 310px; ">-->
    <div style="width:320px; height:200px;  overflow:scroll;">
        <table border="1" style="table-layout:fixed; ">
            <tr style="max-height:50px;height:50px">
                <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴</td>
                <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴2阿里巴巴阿里巴巴2阿里巴巴阿里巴巴2</td>
                <td style="max-width: 100px; max-height:50px; word-break: break-all; ">阿里巴巴阿里巴巴3</td>
                <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴4</td>
            </tr>
            <tr style="max-height:50px; height:50px">
                <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴aa</td>
                <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
                <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴3</td>
                <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴4</td>
            </tr>
        </table>
    </div>


    <br>
    <div style="border: 1px solid #000000; width: 300px; height: 50px;">
        <p>width: 300px; height: 50px</p>
    </div>
    <br>
    <div style="border: 1px solid #000000; width: 100px; height: 50px;">
        <table>
            <tr>
                <td style="width:100px;">width: 100px height: 50px</td>
            </tr>
        </table>
    </div>
</body>
</html>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

海底兩萬里 2019-06-23 19:27

关注

我实现了这个功能，在script中计算表格的显示宽度，外面加一层div，宽度设置成表的宽度，外面再包一层有滚动条的 div.这个方法需要从里面的控件开始一层一层设置外层控件的宽度，都是在 script里设置的值，做法不太灵活。还有更好的实现方法吗？

<!DOCTYPE HTML>
<html>

    <head>
        <style>
            .ell21 {
            max-width: 100px;
            max-height: 80px;
            word-break: break-all;
            word-wrap: break-word;
            white-space: pre-wrap;
            text-align: left;
            vertical-align: top;
        }
        </style>
        <script type="text/javascript">
            window.onload = function() {
            var wid = document.getElementById("mytable").clientWidth;
            // 1 是滚动条所占用宽度，需要根据情况设置一下
            document.getElementById("mydiv").style.width = document.getElementById("mytable").clientWidth + 1 + 'px';
                document.getElementById("outdiv").style.width = '320px';
                document.getElementById("outdiv").style.height = '200px';
            }
        </script>
    </head>

    <body>
        <!-- <div style="overflow: scroll; width: 320px; height: 200px;"> -->
        <div id="outdiv" style="overflow: scroll; ">
            <div id="mydiv" style="">
                <table id="mytable" border="1">
                    <tr>
                        <td style="max-width: 100px; word-break: break-all;">阿里11</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
                    </tr>
                    <tr>
                        <td style="max-width: 100px; word-break: break-all;">阿里11</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴阿里巴巴阿里巴巴</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿阿里巴巴</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿阿里巴巴</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
                    </tr>
                    <tr>
                        <td style="max-width: 100px; word-break: break-all;">阿里11</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴阿里巴巴阿里巴巴</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿阿里巴巴</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿阿里巴巴</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
                    </tr>
                    <tr>
                        <td style="max-width: 100px; word-break: break-all;">阿里11</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
                    </tr>
                    <tr>
                        <td style="max-width: 100px; word-break: break-all;">阿里11</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴阿里巴巴阿里巴巴</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿阿里巴巴</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿阿里巴巴</td>
                        <td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
                    </tr>
                </table>
            </div>
        </div>

        <br>
        <div style="border: 1px solid #000000; width: 300px; height: 50px;">
            <p>width: 300px; height: 50px</p>
        </div>
        <br>
        <div style="border: 1px solid #000000; width: 100px; height: 50px;">
            <table>
                <tr>
                    <td style="width:100px;">width: 100px height: 50px</td>
                </tr>
            </table>
        </div>
    </body>
</html>