为什么我的HTML表不遵守CSS列宽?

| 我有一个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;
}
    
已邀请:
如果将规则“ 3”应用于表,则设置表单元格的宽度可能会带来更多的运气-这在使用表时为我解决了许多“ 4”问题。我不建议切换到仅使用DIV来排列您的内容(如果它适合表的目的)-显示多维数据。     
我同意Hristo的观点,但是在某些情况下需要使用表格,而您的表格问题的解决方案是在表格中添加以下类,然后根据需要更改任何td宽度。
.tables{ border-collapse:collapse; table-layout:fixed;}
我希望这对正在寻找表解决方案的人有所帮助!     
赋予
max-width
min-width
属性都应该起作用。     
我有一堆想要间隔柱的柱子也遇到了同样的问题。 我曾经做:
<td style=\'width: 10px;\'>&nbsp;</td>
但是,当桌子比窗户宽时,间隔实际上并不是10px,而是5px。 在我的情况下,仅使用不带TABLE的DIV并不是一种选择。 所以我尝试了:
<td><div style=\'width: 10px;\'></div></td>
而且效果很好! :)     
设置列宽度(td \'s)的最佳方法是使用表格标题(th \'s)。表格标题会自动在您的td \上设置宽度。您只需要确保在thead中的列与您的正文中的列数相同即可。 在这里查看: http://jsfiddle.net/tKAj8/ 的HTML
<table>
    <thead>
        <tr>
            <th class=\"short-column\">Short Column</th> <!-- th sets the width -->
            <th class=\"short-column\">Short Column</th> <!-- th sets the width -->
            <th class=\"long-column\">Long Column</th> <!-- th sets the width -->
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class=\"lite-gray\">Short Column</td> <!-- td inherits th width -->
            <td class=\"lite-gray\">Short Column</td> <!-- td inherits th width -->
            <td class=\"gray\">Long Column</td> <!-- td inherits th width -->
        </tr>
    </tbody>
</table>
的CSS
table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }

.short-column { background: yellow; width: 15%; }
.long-column { background: lime; width: 70%; }

.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }
    
在表上使用table-layout属性和\“ fixed \”值。
table {
    table-layout: fixed;
    width: 300px; /* your desired width */
}
设置桌子的整个宽度后, 您现在可以按td \的百分比设置宽度。
td:nth-child(1), td:nth-child(2) {
    width: 15%;
}
您可以通过以下链接了解更多信息:http://www.w3schools.com/cssref/pr_tab_table-layout.asp     
我遇到了无法调整使用colspan的
table-layout: fixed
表中的列的大小的问题。为了使遇到上述建议无效的人受益,colgroup为我工作(OP代码的变体):
div {
    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;
}
td.longColumn { 
     width: 300px;
}
table {
    border: 1px solid; 
    text-align: center;
    width: 100%;
}
td, tr {
  border: 1px solid; 
}
<div>
    <table>
        <colgroup>
            <col class=\'longColumn\' />
            <col class=\'longColumn\' />
            <col class=\'longColumn\' />
            <col/>
            <col/>
            <col/>
            <col/>
        </colgroup>
        <tbody>
        <tr>
            <td colspan=\"7\">Stuff</td>
        </tr>
        <tr>
            <td>Long Column</td>
            <td>Long Column</td>
            <td>Long Column</td>
            <td>Short</td>
            <td>Short</td>
            <td>Short</td>
            <td>Short</td>
        </tr>
        </tbody>
    </table>
</div>
对于那些存在表格单元格/列宽度问题和
table-layout: fixed
的问题没有帮助。 将固定宽度应用于表格单元格(
<td>
<th>
)时,请勿为所有单元格分配宽度。至少应有一个(自动)宽度的单元格。该单元格将充当表格剩余空间的填充物。 例如
<table>
  <thead>
    <tr>
      <th style=\"width: 150\">Assigned 150 width to Table Header Cell</th>
      <th style=\"width: 100\">Assigned 100 width to Table Header Cell</th>
      <th>No width assigned</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style=\"width: 150\">Assigned 150 width to Table Body Cell</td>
      <td style=\"width: 100\">Assigned 100 width to Table Body Cell</td>
      <td>No width assigned</td>
    </tr>
  </tbody>
</table>
附言您可以在此处使用样式类,而无需使用嵌入式样式。     
无法修改“ 21”,即列宽不可设置。您可以添加样式
white-space:nowrap;
,这可能会有所帮助。或者,您可以添加ѭ23来为列添加空间。 也许您可以通过HTML方式设置col宽度:
<td width=\"70%\">January>/td>
不幸的是,在HTML 4.01和更高版本中,这种方式无效。     
这样的事情怎么样... http://jsfiddle.net/qabwb/1/ 的HTML
<div id=\"wrapper\">
    <div class=\"row\">
        <div class=\"column first longColumn\">stuff</div>
        <div class=\"column longColumn\">more stuff</div>
        <div class=\"column\">foo</div>
        <div class=\"column\">jsfiddle</div>
    </div>
    <div class=\"row\">
        <div class=\"column first longColumn\">stuff</div>
        <div class=\"column longColumn\">more stuff</div>
        <div class=\"column\">foo</div>
        <div class=\"column\">jsfiddle</div>
    </div>
    <div class=\"row\">
        <div class=\"column first longColumn\">stuff</div>
        <div class=\"column longColumn\">more stuff</div>
        <div class=\"column\">foo</div>
        <div class=\"column\">jsfiddle</div>
    </div>
</div>
的CSS
#wrapper {
    min-width: 450px;
    height: auto;
    border: 1px solid lime; 
}

.row {
    padding: 4px;   
}
.column {
    border: 1px solid orange;
    border-left: none;
    padding: 4px;
    display: table-cell;
}

.first { 
    border-left: 1px solid orange;
}

.longColumn {
    min-width: 150px;
}
    

要回复问题请先登录注册