wxmwzz
海底兩萬里
2019-06-22 20:57
采纳率: 0%
浏览 719

如何实现 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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • wxmwzz
    海底兩萬里 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>
    
    
    点赞 评论

相关推荐