CODEWITHSUNDEEP
htmlcsshtml-table
StevenChow
StevenChow

Reputation: 155

Set column width of table in div with horizontal scrollbar

I want to set the column width of a table that is contained in a div. The width of the table can exceed the fixed width div, so I want the div to show a horizontal scrollbar - but the table column won't expand to the width I'm setting it at. How can I get this to work?

#content {
    width:200px;
    overflow-x: auto;
}
td,th {
   border-style:solid;
}

<div id="content">
<table style="border-style:solid;">
    <tr>
        <th style="width:50px">124</th>
        <th style="width:550px">124</th>
    </tr>
    <tr>
        <td>124</td>
        <td>124</td>
    </tr>
</table>
</div>

Upvotes: 1

Views: 4803

Answers (2)

Akhil Thayyil
Akhil Thayyil

Reputation: 9413

use min width attribute

    <th style="min-width:50px">124</th>
    <th style="min-width:550px">124</th>

Upvotes: 1

Christophe
Christophe

Reputation: 28154

You need to use min-width if you want to force the table width.

Here is your example with the scrollbar: http://jsfiddle.net/CEUVV/

Upvotes: 5

Related Questions