为什么我的HTML表格不符合我的CSS列宽？

Question

我有一个HTML表格,我希望前几列很长.我在CSS中这样做:

td.longColumn
{ 
     width: 300px;
}

这是我的表的简化版本

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

出于某种原因,当有很多列时,该表似乎使该列<300px.我基本上希望它保持宽度,无论如何(只是增加水平滚动条).

容器,表里面,没有任何类型的最大宽度,所以我想不通为什么它挤压此列中,而不是尊重这个宽度.

无论如何都在这周围,无论如何,这个柱子会保持一定的宽度吗？
这是外容器div的CSS:

#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

如果将规则应用于表格,那么为表格单元格设置宽度可能会更加幸运table-layout: fixed- 这cell-sizing在使用表格时帮助了我很多问题.我不建议切换到仅使用DIV来安排您的内容,如果它符合表的目的 - 显示多维数据.

Answer 2

我同意Hristo,但是在某些情况下需要使用表格,并且解决表格问题的方法是在表格下面添加类,然后根据需要更改任何td宽度.

.tables{ border-collapse:collapse; table-layout:fixed;}

我希望这有助于寻找桌面解决方案的人!

Answer 3

赋予它max-width和min-width属性都应该有效.