为什么我的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> 

的简化版本，出于某种原因，该表似乎让这列< 300像素的时候也有很多列。我基本上希望它保持这个宽度，不管怎样（只需增加水平滚动条）。

表格在里面的容器没有任何类型的最大宽度，所以我不知道为什么它压缩这个列而不是尊重这个宽度。

反正有，所以无论如何，这个列会保持一定的宽度？
这里是外容器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

无法修改<td> width;即，列的宽度是不可设置。您可以添加可能有所帮助的造型white-space:nowrap;。或者，您可以添加  s来为列添加空间。

也许你可以设置山坳宽度的HTML方式：<td width="70%">January>/td>

不幸的是，HTML 4.01，后来，这种方式是无效的。

Answer 3

如何这样的事情...

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

Answer 4

我同意Hristo，但有些情况下需要使用表格，并且表格问题的解决方案是在表格下方添加类别，然后根据需要更改任何td宽度。

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

我希望这有助于寻找表格解决方案的人！

Answer 5

我有一堆列我想要间隔柱的问题。 我以前做的：

<td style='width: 10px;'>&nbsp;</td> 

但是当表比窗口宽，间隔是不是真的10px的，但也许为5px。 在我的情况下，仅使用没有TABLE的DIV不是一种选择。 所以，我想：

<td><div style='width: 10px;'></div></td> 

而且效果很不错！ :)

Answer 6

设置列宽（td's）的最佳方法是使用表头（th's）。表格标题会自动设置您的td的宽度。你只需要确保你的帖子里的你的列与你的tbody中的列数相同。

看看这里： 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; } 

Answer 7

给予它既max-width和min-width属性应该工作。

Answer 8

在表格中使用表格布局属性和“固定”值。

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

Answer 9

我的问题与不能够在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>