Question

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/

Answer 1

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.