Question

我将dataTable lib与外部插件一起使用，我希望包装器宽度能够自行调整。

即使宽度很重要超过视口，div宽度也不会超过100％。

如何使用div包装器来适应表宽？

以下是一个例子：

<html>
<head>
    <title>test</title>
    <style>
    .wrapper {
        background-color: red;
        /* width: 8000px; -> don't look for this kind of solution */
        width: auto;
        display: table;
    }

    .table {
        display: table-cell;
    }

    .table th {
        background-color: yellow;
        border: 1px solid blue;
        width: 4000px; /* -> note that I can't use the min-width trick because this property is set by an external jQuery plugin */
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <table class="table">
            <thead>
                <tr>
                    <th>Hello</th>
                    <th>World</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>

Answer 1

你应该试试这个：

.table {
    /*width: 4000px;*/
    overflow:hidden;
    width:100%;
    table-layout: fixed;
}

如何扩展div包装器宽度以适应表中的内容

1 个答案: