为啥我的 HTML 表格不尊重我的 CSS 列宽？
Posted
技术标签:
【中文标题】为啥我的 HTML 表格不尊重我的 CSS 列宽？【英文标题】：Why is my HTML table not respecting my CSS column width?为什么我的 HTML 表格不尊重我的 CSS 列宽？ 【发布时间】：2011-08-05 22:30:58 【问题描述】：我有一个 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>
由于某些原因，当有很多列时，该表似乎使该列
表格所在的容器没有任何类型的最大宽度，因此我无法弄清楚为什么它会向下挤压此列而不是尊重此宽度。
无论如何，无论如何，此列都会保持一定的宽度？ 这是外部容器 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;
【问题讨论】：
【参考方案1】：无法修改<td> width;，即列宽不可设置。您可以添加样式white-space:nowrap;，这可能会有所帮助。或者您可以添加&nbsp;s 为列添加空间。
也许您可以通过 HTML 方式设置 col 宽度：<td width="70%">January>/td>
很遗憾，在 HTML 4.01 及更高版本中，这种方式无效。
【讨论】：
我看到他们在这里编辑它：w3schools.com/tags/tryit.asp?filename=tryhtml_td_width @ooo - 是的，但他们使用的是 HTML 设置宽度的方式，而不是 CSS。也许 OP 可以这样做。 @ooo - OP == 原始海报，使用 Usenet 语言。哦，现在我知道 OP 就是你 :-) 我一直看到人们使用它，但我不知道它是什么意思，所以谢谢。 你不应该添加“ ”对任何东西！！超级糟糕..和错误..它的巴东【参考方案2】：这样的事情怎么样...
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;
【讨论】：
在很多情况下，表格仍然可以使用。比如表格数据！【参考方案3】：如果您将规则 table-layout: fixed 应用于表格，您可能会更幸运地为表格单元格设置宽度 - 这在使用表格时帮助我解决了很多单元格大小问题。如果它符合表格的目的 - 显示多维数据，我不建议切换到仅使用 DIV 来排列您的内容。
【讨论】：
我必须添加table-layout: fixed; width: 100%; 并且它有效。谢谢！
@nrodic 是的，如果表格没有设置宽度，它就不起作用
如果您有一个复杂的布局（例如，第一行/行标题的单元格数量与其他的不同），那么您可能还需要为每个列指定一个宽度.【参考方案4】：
我同意 Hristo 的观点，但在某些情况下需要使用表格，解决表格问题的方法是将以下类添加到表格中，然后根据需要更改任何 td 宽度。
.tables border-collapse:collapse; table-layout:fixed;
我希望这对正在寻找表格解决方案的人有所帮助！
【讨论】：
这里我在想 HTML/CSS 有一些错误，因为它没有以“表格”中为每个表格指定的宽度呈现表格列和表格' 和 'td' 标签或样式应用于相同。相反，只是 我 太愚蠢了，不知道我应该做一个 CSS 声明，将 'table-layout' 属性设置为 'fixed'。 我真是个白痴。感谢您让我直截了当 - 它在没有其他方法的情况下完美运行。它甚至解决了下拉列表控件强制列到我想要的宽度的 2 倍左右的问题。 应该提到我使用 table-layout:fixed 和 width:auto 来达到我想要的结果。 完美运行。谢谢。 嘿，BH，我很高兴！很高兴它有帮助！【参考方案5】：我在需要间隔柱的一堆柱子上遇到了同样的问题。 我曾经这样做过：
<td style='width: 10px;'> </td>
但是当桌子比窗户宽时，间隔并不是真正的10px，而是5px。 在我的情况下，只使用没有 TABLE 的 DIV 不是一个选项。 所以我尝试了：
<td><div style='width: 10px;'></div></td>
而且效果很好！ :)
【讨论】：
使用内联样式有效。我还必须调整列标题并将其他标题样式设置为width:auto;【参考方案6】：
设置列宽 (td's) 的最佳方法是使用表头 (th's)。表格标题将自动设置您的 td 的宽度。你只需要确保你的thead中的列与你的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;
【讨论】：
【参考方案7】：同时给它max-width 和min-width 属性应该可以工作。
【讨论】：
这是最好的答案。 黄金！太感谢了。花了几个小时在这上面。我只需要min-width。【参考方案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/cs-s-ref/pr_tab_table-layout.asp
【讨论】：
【参考方案9】：我遇到了无法调整使用 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>【讨论】：
【参考方案10】：对于那些有表格单元格/列宽问题并且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>
附：你可以在这里使用样式类，你不需要使用内联样式。
【讨论】：
以上是关于为啥我的 HTML 表格不尊重我的 CSS 列宽？的主要内容，如果未能解决你的问题，请参考以下文章