Table is top-absorbing and its width is adaptive.

paste the demo code to make it easy for bosses to debug:

<!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; iPP) {
                    result += "<tr>";
                    for (let j = 0; j < tdLength; jPP) {
                        result += `<td>${randomLengthString()}</td>`
                    }
                    result += "</tr>"
                }
                return result;
            }

            function getTheadStr() {
                let result = "<tr>";
                for (let j = 0; j < tdLength; jPP) {
                    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>

the width of
1, td and th is longer than that of td and th, for example:
clipboard.png

clipboard.png

2tbodyoverflow-y:auto

clipboard.png

Apr.01,2021

  http://www.hangzhoufe.com/top.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b31f6d-2bddf.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b31f6d-2bddf.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?