CODEWITHSUNDEEP
htmlcsshtml-table
Anriëtte Myburgh
Anriëtte Myburgh

Reputation: 13517

Table doesn't want to stretch inside div

I have a <table> inside a <div> tag, which doesn't want to span as long as it needs to be. I need to specify a width in px for the <table> to span and thus cause the <div> container it is inside to scroll. Otherwise, the <table> just spans to a width of 100%, i.e. the width of the <div>.

My example is as follows:

<div style="width:880px; overflow:scroll;">
    <table> // I need to explicitly specify a width for it, otherwise it just span 100% which is incorrect
        <tr><td></td><td></td><td></td></tr>
    </table>
</div>

I have specified for all the <td> tags a width inside my CSS.

I don't understand why the <table> can't determine it's own width or just respect the widths of all the <td> tags.

Upvotes: 2

Views: 1716

Answers (2)

Vinay B R
Vinay B R

Reputation: 8421

Try setting white-space: nowrap; on the td in your table and dump a lot of text inside each td you will start seeing a scroll bar on your div.

Upvotes: 1

Adam Price
Adam Price

Reputation: 10257

Are you sure there isn't any unintended CSS being applied to the table? By default the table only expands to accommodate its columns.

<div style="width:880px; overflow:scroll; background-color: green;">
<table style="background-color: red;">
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
</table>  
</div>

Using this code, you can see the red table is only as big as its columns in relation to the green div as long as no other CSS is involved.

Use a tool like Firebug or IE's Developer Tools (F12) to see which styles are actually being applied to the table element.

See the example here.

Upvotes: 0

Related Questions