CODEWITHSUNDEEP
htmlcsshtml-table
user2980615
user2980615

Reputation: 21

How to maintain TD width in 100% width table?

I have a 100% width table that fits the entire html body. Each <td> has a fixed width, which in sum exceeds the body width.

The HTML:

<table>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>

etc... etc...

            <td>test</td>
            <td>test</td>
            <td>last one in the line</td>
        </tr>
    </table>

Simple CSS to demonstrate:

table td {
    width: 100px;
    border: solid 1px black;
    white-space: nowrap;
}

Here is an example JSFiddle.

The problem is that instead of overflowing the body and showing a horizontal scrollbar, the table reduces each <td>'s width to fit the document.

How can I force the width and show a scrollbar?

Upvotes: 2

Views: 1837

Answers (2)

codingpirate
codingpirate

Reputation: 1414

use use min-width, as below

table td {min-width: 100px; border: solid 1px black;white-space: nowrap;}

Upvotes: 2

JJJ
JJJ

Reputation: 33153

Use min-width instead to force the cell to always keep the width.

table td {
    min-width: 100px;
    border: solid 1px black;
    white-space: nowrap;
}

Demo: http://jsfiddle.net/H55Se/3/

Upvotes: 4

Related Questions