CODEWITHSUNDEEP
htmlcss
Steven
Steven

Reputation: 18869

Table cells resizing when browser resizes

I have this:

table td
{
    width: 300px;
}

<table>
    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

Everything is fine if the browser is big enough. But if I resize my browser and make it too small, my cells resize. How can I make them stay a fixed width?

Here it is in jsFiddle: http://jsfiddle.net/y2wHn/

Upvotes: 1

Views: 18863

Answers (5)

user569322
user569322

Reputation:

Do this to your CSS:

table td
{
    min-width: 300px;
}

This specifies a minimum-width, so it can never be smaller than 300px.

amosrivera's suggestion is also a good way to go about it.

Upvotes: 8

outaTiME
outaTiME

Reputation: 11

what about if u add a current css rule:

table {
  width: 900px;
}

fixed table width no?

Upvotes: 0

InanisAtheos
InanisAtheos

Reputation: 632

You have to set the table to a specified width as well, otherwise it will resize based on the browsers window size.

Updated code:

table { width: 900px; }
table td
    {
        width: 300px;
        background-color: #432152;
    }

Upvotes: 0

Mohsen
Mohsen

Reputation: 65825

set width of the whole table not td

table{width:900px;}
table td
    {    border:1px solid black;

    }

http://jsfiddle.net/y2wHn/6/

Upvotes: 0

Pat
Pat

Reputation: 25675

Set a fixed width on the table:

table {
    width: 900px;
}

Upvotes: 0

Related Questions