Question

enter image description here 一个表包含大量列（30列），每个th标记都设置了white-space:nowrap样式。这会延伸父div。如何防止这种情况并为div设置水平滚动。？

<style>
    .monthly_rental_payment_daily th {
        white-space: nowrap;
    }

    .monthly_rental_payment_daily td {
        white-space: nowrap;
    }
</style>
        <div style="width: 100%;" class="dashboardBox" id="dashboard-monthly-rental-payment">

        <div class="dashboardBoxTitle" id="dashboard-monthly-rental-payment-title">
            <span>Monthly Rental Payments</span>
        </div>
        <div style="height:auto" class="dashboardBoxBody"
             id="dashboard-monthly-rental-payment-body">

        <table
                class="monthly_rental_payment_daily tablesorter standardTable">
        <thead>
        <tr>
            <th style="text-align: left;padding-right: 15px">Location</th>

            <th class="left" style="padding-right: 15px">Total to be paid</th>

            <th class="left" style="padding-right: 15px">Total paid to date</th>
            <th style="padding-right: 15px"></th>

            <th class="left" style="padding-right: 15px">Total still to be paid</th>
            <th style="padding-right: 15px"></th>


            <th class="left" style="padding-right: 15px">1st - 7th</th>
            <th style="padding-right: 15px"></th>

            <th class="left" style="padding-right: 15px">8th-14th</th>
            <th style="padding-right: 15px"></th>

            <th class="left" style="padding-right: 15px">15th-21st</th>
            <th style="padding-right: 15px"></th>

            <th class="left" style="padding-right: 15px">22nd+</th>
            <th style="padding-right: 15px"></th>



            <th class="left" style="padding-right: 15px">1st - 7th</th>
            <th style="padding-right: 15px"></th>

            <th class="left" style="padding-right: 15px">8th-14th</th>
            <th style="padding-right: 15px"></th>

            <th class="left" style="padding-right: 15px">15th-21st</th>
            <th style="padding-right: 15px"></th>

            <th class="left" style="padding-right: 15px">22nd+</th>
            <th style="padding-right: 15px"></th>


            <th class="left" style="padding-right: 15px">1st - 7th</th>
            <th style="padding-right: 15px"></th>

            <th class="left" style="padding-right: 15px">8th-14th</th>
            <th style="padding-right: 15px"></th>

            <th class="left" style="padding-right: 15px">15th-21st</th>
            <th style="padding-right: 15px"></th>

            <th class="left" style="padding-right: 15px">22nd+</th>
            <th style="padding-right: 15px"></th>

        </tr>
        </thead>
    </table>
    </div>
    </div>

Answer 1

如果没有真正看到你的代码，我只能猜测。尝试在div上设置宽度并设置overflow-x滚动。

Answer 2

在div中使用样式overflow: auto或overflow: scroll。在包含表格的div中，也尝试将最大宽度设置为100％，如下所示：max-width: 100%

工作小提琴：http://jsfiddle.net/95Xy6/2/

Answer 3

确定。首先，我将采取你最新的小提琴http://jsfiddle.net/rkpolepeddi/d4nc2/5/。

问题是表没有采用列的实际宽度，而是采用列的内容。因此，我们需要根据表格列内容强制不要拉伸表格。

我们有一个选择。那是table-layout CSS属性。 table-layout:fixed财产会做什么？请看以下定义。

The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells

这么简单。将table-layout:fixed添加到外部单元格中，如下所示。

.outer_table {
   width:100%;    
   table-layout:fixed;
}

Updated DEMO

Answer 4

在div [{3}}

中使用overflow:auto

Answer 5

添加overflow-x:scroll。它会提供滚动效果。

Demo

div内的表格水平延伸div超过100％

5 个答案: