CODEWITHSUNDEEP
htmlcsshtml-table
EFanZh
EFanZh

Reputation: 2436

How to adjust a table's width according to its contents regardless of the window's width?

Normally, a table adjust it's size according to its contents. But when a table's appropriate width is larger than the window's width. the table seems to begin to adjust its width according to the window's width.

This table may adjust its width according to its contents:

<table border="1">
    <tr>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
    </tr>
</table>

And this table may adjust its width according to the window's width, one cell's content may be broken into three lines:

<table border="1">
    <tr>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
    </tr>
</table>

I want to contain the table in a <div>, and set the <div>'s overflow to scroll, I can scroll to view the table if it's too big for the window to display. So how to make the table ignore the window's size and just adjust it's size according to it's content?

Upvotes: 1

Views: 661

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21214

you can use the white-space: nowrap; on the table cell contents. This will prevent them from being broken down.

Here is a jsfiddle example of how you can then put it into a div with scrollable overflow:

http://jsfiddle.net/VE4sU/17/

Upvotes: 5

Related Questions