为什么我的 HTML 表格不尊重我的 CSS 列宽? [英] Why is my HTML table not respecting my CSS column width?

问题描述

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

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>

出于某种原因，该表似乎使此列

当有很多列时为 300px.我基本上希望它无论如何都保持那个宽度(并且只增加水平滚动条).

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.

无论如何，这周围是否存在所以无论如何，该列都会保持一定的宽度?
这是外部容器div的CSS:

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

推荐答案

如果您将规则 table-layout: fixed 应用于表格，您可能会在为表格单元格设置宽度方面获得更多运气 -这在使用表格时帮助我解决了很多单元格大小问题.如果符合表格的目的 - 显示多维数据，我不建议改用仅使用 DIV 来排列您的内容.

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.

这篇关于为什么我的 HTML 表格不尊重我的 CSS 列宽?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！