为什么我的 HTML 表格不尊重我的 CSS 列宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5670402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my HTML table not respecting my CSS column width?
提问by leora
I have a HTML table and I want the first few columns to be quite long. I am doing this in CSS:
我有一个 HTML 表格，我希望前几列很长。我在 CSS 中这样做：
td.longColumn
{
width: 300px;
}
and here is a simplified version of my table
这是我的表格的简化版本
<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>
For some reason the table seems to make this column < 300px when there are a lot of columns. I basically want it to keep that width no matter what (and just increase the horizontal scroll bar).
出于某种原因，当有很多列时，表格似乎使此列 < 300px。我基本上希望它无论如何都保持那个宽度（并且只增加水平滚动条）。
The container that the table is inside, doesn't have any type of max width so I can't figure out why it's squeezing this column down as opposed to respecting this width.
桌子所在的容器没有任何类型的最大宽度，所以我不明白为什么它会挤压这个列而不是尊重这个宽度。
Is there anyway around this so no matter what, this column will stay a certain width?
Here is the CSS of the outer container div:
无论如何，这周围是否存在所以无论如何，该列都会保持一定的宽度？
这是外部容器 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;
}
回答by aphax
You may get more luck with setting widths for your table cells if you apply the rule table-layout: fixedto the table - this has helped me with a lot of cell-sizingissues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
如果您将规则应用于表格，您可能会在为表格单元格设置宽度方面获得更多运气table-layout: fixed- 这cell-sizing在使用表格时帮助我解决了很多问题。如果它符合表格的目的 - 显示多维数据，我不建议切换到仅使用 DIV 来排列您的内容。
回答by Sagar Ranpise
I agree with Hristo but there are some cases where table need to be used and solution to your table problem is adding below class to the table and then changing any td width as per your need.
我同意 Hristo，但在某些情况下需要使用表格，解决表格问题的方法是将下面的类添加到表格中，然后根据需要更改任何 td 宽度。
.tables{ border-collapse:collapse; table-layout:fixed;}
I hope this helps for someone who is looking for table solution!
我希望这对正在寻找表格解决方案的人有所帮助！
回答by umesh
Giving it both max-widthand min-widthattributes should work.
给它max-width和min-width属性应该工作。
回答by Matt Roy
I had the same problem with a bunch of columns where I wanted spacers columns. I used to do:
我在一堆需要间隔柱的柱子上遇到了同样的问题。我曾经做过：
<td style='width: 10px;'> </td>
But when the table was wider than window, the spacers were not really 10px, but maybe 5px. And using only DIVs without a TABLE was not an option in my case. So I tried:
但是当桌子比窗户宽时，间隔实际上不是 10px，而是可能是 5px。在我的情况下，仅使用没有 TABLE 的 DIV 不是一个选项。所以我试过：
<td><div style='width: 10px;'></div></td>
And it worked very well ! :)
而且效果很好！:)
回答by Oneezy
The best way to set your column widths (td's) is to use a table header (th's). Table headers will set the width on your td's automatically. You just have to make sure that your columns inside your thead are the same number of columns in your tbody.
设置列宽 (td's) 的最佳方法是使用表格标题 (th's)。表格标题将自动设置您的 td 的宽度。您只需要确保thead 中的列与tbody 中的列数相同。
Check it out here: http://jsfiddle.net/tKAj8/
在这里查看：http: //jsfiddle.net/tKAj8/
HTML
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
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; }
回答by Cyan Baltazar
Use table-layout property and the "fixed" value on your table.
使用表格布局属性和表格上的“固定”值。
table {
table-layout: fixed;
width: 300px; /* your desired width */
}
After setting up the entire width of the table, you can now setup the width in % of the td's.
设置表格的整个宽度后，您现在可以以 td 的百分比设置宽度。
td:nth-child(1), td:nth-child(2) {
width: 15%;
}
You can learn more about in on this link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp
您可以在此链接中了解更多信息：http: //www.w3schools.com/cssref/pr_tab_table-layout.asp
回答by Allison
I had issues with not being able to size columns in a table-layout: fixedtable that was using a colspan. For the benefit of anyone experiencing a variant of that issue where the suggestion above doesn't work, colgroup worked for me (variation on OP's code):
我遇到了无法在table-layout: fixed使用 colspan的表中调整列大小的问题。为了任何遇到上述建议不起作用的问题变体的人的利益，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>回答by Jo E.
For those that are having Table Cell/Column width problems and table-layout: fixeddid not help.
对于那些有表格单元格/列宽问题并且table-layout: fixed没有帮助的人。
When applying fixed widths to table cells (<td>or <th>), do not assign a width to all of the cells. There should be at least one cell with an (auto) width. This cell will act as a filler for the remaining space of the table.
对表格单元格（<td>或<th>）应用固定宽度时，不要为所有单元格指定宽度。应该至少有一个具有（自动）宽度的单元格。该单元格将充当表格剩余空间的填充物。
e.g.
例如
<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>
P.S. you can use style classes here, you don't need to use an in-line style.
PS这里可以使用样式类，不需要使用内嵌样式。
回答by Pete Wilson
Can't modify <td> width;that is, column width isn't settable. You can add the styling white-space:nowrap;which might help. Or you can add s to add space to columns.
无法修改<td> width;，即列宽不可设置。您可以添加white-space:nowrap;可能有帮助的样式。或者您可以添加 s 以向列添加空间。
Maybe you could set col width the HTML way: <td width="70%">January>/td>
也许您可以以 HTML 方式设置 col 宽度： <td width="70%">January>/td>
Unfortunately, in HTML 4.01 and later, that way isn't valid.
不幸的是，在 HTML 4.01 及更高版本中，这种方式无效。
回答by Hristo
How about something like this...
这样的事情怎么样...
HTML
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
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;
}
