为什么我的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。 我基本上希望它保持这个宽度，不pipe是什么（只是增加水平滚动条）。
表里面的容器没有任何types的最大宽度，所以我不知道为什么它挤压这个列，而不是尊重这个宽度。
反正有这个，不pipe怎样，这个专栏会保持一定的宽度吗？
这里是外部容器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; }
如果您应用规则table-layout: fixed到表格，您可能会得到更多的运气，为表格单元格设置宽度 – 这在使用表格时帮助我解决了很多cell-sizing问题。 我不build议切换到只使用DIV来安排您的内容，如果它符合表的目的 – 显示多维数据。
我同意Hristo，但也有一些情况下需要使用表，并解决您的表问题是添加到类的表下，然后根据您的需要更改任何TD宽度。
.tables{ border-collapse:collapse; table-layout:fixed;}
我希望这有助于寻找桌面解决scheme的人！
给它max-width和min-width属性应该工作。
我有一堆列，我想要间隔柱列相同的问题。 我曾经做：
<td style='width: 10px;'> </td>
但是，当桌子比窗户宽时，垫片不是真的10px，而是5px。 而在没有TABLE的情况下只使用DIV并不是我的select。 所以我试了一下：
<td><div style='width: 10px;'></div></td>
它工作得很好！ 🙂
设置列宽（td's）的最好方法是使用表头（th's）。 表格标题会自动设置您的td的宽度。 你只需要确保你的post里面的列与你的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; }
在表格中使用表格布局属性和“固定”值。
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
我遇到了无法调整table-layout: fixed列的问题table-layout: fixed使用colspan的table-layout: fixed表格。 对于任何遇到上述build议不起作用的变体的人，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>
无法修改<td> width; 也就是列宽不可设置。 你可以添加样式white-space:nowrap; 这可能有帮助。 或者您可以添加 为列添加空间。
也许你可以设置列宽的HTML方式： <td width="70%">January>/td>
不幸的是，在HTML 4.01和更高版本中，这种方式是无效的。
怎么样这样的事情…
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; }
