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;
}

```