表格离开div

Question

我的视图中有div

这是代码

<div style="width: 100%; text-align: center; margin-top: 10px;">
    <table class="table" style="table-layout: fixed;">
        <tr style="background: white">
            <th></th>
            <th style="font-size: 20px; text-align: center;color:#1d69b4;">
                Invoice
            </th>
            <th style="font-size: 20px; text-align: center;color:#1d69b4;">
                Status
            </th>
            <th style="font-size: 20px; text-align: center;color:#1d69b4;">
                First -Last Name
            </th>
            <th style="font-size: 20px; text-align: center;color:#1d69b4;">
                Invoice printed
            </th>
            <th style="font-size: 20px; text-align: center;color:#1d69b4;">
                Invoice paid
            </th>
            <th style="font-size: 20px; text-align: center;color:#1d69b4;">
                Payment reminder printed
            </th>
            <th style="font-size: 20px; text-align: center;color:#1d69b4;">
                1st overdue notice printed
            </th>
            <th style="font-size: 20px; text-align: center;color:#1d69b4;">
                2nd overdue notice printed
            </th>
            <th style="font-size: 20px; text-align: center;color:#1d69b4;">
                Open invoice with VAT€
            </th>
            <th style="font-size: 20px; text-align: center;color:#1d69b4;">
                Select all
            </th>

            <th></th>
        </tr>

    </table>
</div>

在1920 * 1080上都可以，但在1366 * 768上有些列超出div。

喜欢这个

我尝试使用style="table-layout: fixed;"

但它看起来像这样

如何让我的桌子看起来正确？

Answer 1

尝试对表使用max-width并将值设置为小于100％的值，删除表格布局样式。