CODEWITHSUNDEEP
htmlcsshtml-table
Ravi
Ravi

Reputation: 2464

table inside a div stretches the div horizontally more than 100%

enter image description hereA table has large number of columns (30 columns) and each of the th tags have white-space:nowrap style set on them. This stretches the parent div. How can this be prevented and have a horizontal scroll for the 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>

Upvotes: 1

Views: 2099

Answers (5)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Ok. First of all i am going to take your latest fiddle http://jsfiddle.net/rkpolepeddi/d4nc2/5/.

The problem is that table not taking actual width of column, it is taking the content of the columns. So we need to force don't stretch the table based on the table column content.

We have one option here. That is table-layout CSS property. What table-layout:fixed property will do? Look at the following definition.

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

So simple. Add the table-layout:fixed to your outer cell like below.

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

Updated DEMO

Upvotes: 2

Mayank
Mayank

Reputation: 122

Add overflow-x:scroll. it will provide a scroll effect.

Demo

Upvotes: 0

entropic
entropic

Reputation: 1683

Use the style overflow: auto or overflow: scroll in your div. In the div containing the table, also try setting the max width to 100% as well like this: max-width: 100%

Working Fiddle: http://jsfiddle.net/95Xy6/2/

Upvotes: 1

jtorrescr
jtorrescr

Reputation: 627

Use overflow:auto in your div jsfiddle example

Upvotes: 0

dzny
dzny

Reputation: 374

Without actually seeing your code, I can only guess. try to set a width on the div and set overflow-x to scroll.

Upvotes: 1

Related Questions