爲什麼我的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>