Why is my HTML table not respecting my CSS column width?

Question

I have a HTML table and I want the first few columns to be quite long. I am doing this in CSS:

td.longColumn {       width: 300px; } 

and here is a simplified version of my table

<table>   <tr>    <td class='longColumn'></td>    <td class='longColumn'></td>    <td class='longColumn'></td>    <td></td>    <td></td>    <td></td>    <td></td>    <td></td>    [ . . and a bunch more columns . . .]   </tr> </table> 

For some reason the table seems to make this column < 300px when there are a lot of columns. I basically want it to keep that width no matter what (and just increase the horizontal scroll bar).

The container that the table is inside, doesn't have any type of max width so I can't figure out why it's squeezing this column down as opposed to respecting this width.

Is there anyway around this so no matter what, this column will stay a certain width?
Here is the CSS of the outer container div:

#main {     margin: 22px 0 0 0;     padding: 30px 30px 15px 30px;     border: solid 1px #AAAAAA;     background-color: #fff;     margin-bottom: 30px;     margin-left: 10px;     _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */     float: left;     /*width: 1020px;*/     min-width:1020px;     display: block;     overflow: visible;     z-index: 0; } 

Answer 1

You may get more luck with setting widths for your table cells if you apply the rule table-layout: fixed to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.

Answer 2

Giving it both max-width and min-width attributes should work.