在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ table吸頂且寬度自適應(yīng)

table吸頂且寬度自適應(yīng)

貼上demo代碼，方便大佬們調(diào)試:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table</title>
    <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        th,
        td {
            white-space: nowrap;
            padding: 10px;
        }
    </style>

    <script>
        $(function () {
            let trLength = Math.ceil(100 * Math.random());
            let tdLength = Math.ceil(20 * Math.random());

            function randomLengthString() {
                return '測試'.repeat(Math.ceil(30 * Math.random()));
            };

            function getTbodyStr() {
                let result = '';
                for (let i = 0; i < trLength; i++) {
                    result += '<tr>';
                    for (let j = 0; j < tdLength; j++) {
                        result += `<td>${randomLengthString()}</td>`
                    }
                    result += '</tr>'
                }
                return result;
            }

            function getTheadStr() {
                let result = '<tr>';
                for (let j = 0; j < tdLength; j++) {
                    result += `<th>${randomLengthString()}</th>`
                }
                result += '</tr>'
                return result;
            }


            const Html =
                `<table class="table" border>
                    <thead class="thead">
                        ${getTheadStr()}
                    </thead>
                    <tbody class="tbody">
                        ${getTbodyStr()}
                    </tbody>
                </table>`

            $('body').append(Html);
        })
    </script>
</head>

<body>
</body>

</html>

需求是：
1、td、th的寬度，為td、th中寬度較長的，比如：
clipboard.png

clipboard.png

2、希望tbody能實(shí)現(xiàn)類似overflow-y:auto的效果。

clipboard.png

回答
編輯回答
編輯回答
懶洋洋
.fixed-table
  position fixed
  top 0
  left 0
  right 0
  height 200px

  tbody
    max-height 160px
    overflow-y auto

這樣不行么？

2017年7月6日 09:34