Html 无论内容如何，将表格单元格锁定为其默认大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4654481/
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
Lock table cells to their default size regardless of content
提问by Nick
If I have
如果我有
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
and
和
table
{ width: 100%; height: 100%; }
Each cell takes up an equal quarter of the table, and the table stretches to fit the window.
每个单元格占据表格的四分之一，表格会伸展以适应窗口。
How can I prevent these table cells from resizing themselves to fit the content within the cells (while still fitting the table's container)?
如何防止这些表格单元格调整自身大小以适应单元格内的内容（同时仍然适合表格的容器）？
回答by whostolemyhat
You could try table-layout:fixed;- this sets the layout to a certain fixed size (specified in CSS) and ignores the content of the cells, so the width of the cell never changes. I'm not sure if this affects vertical layout or not.
您可以尝试table-layout:fixed;- 这将布局设置为某个固定大小（在 CSS 中指定）并忽略单元格的内容，因此单元格的宽度永远不会改变。我不确定这是否会影响垂直布局。
回答by ChrisW
You can do it by using position: absoluteon the content of each table cell: because if you do then the size of the content doesn't affect the size of the cell.
您可以通过position: absolute在每个表格单元格的内容上使用来做到这一点：因为如果您这样做，那么内容的大小不会影响单元格的大小。
To do this, you must then also position the table cells (so that absolute positioning of the content is relative to the table cell) -- and/or, to support Firefox, position an extra div within the table cellssince Firefox doesn't let you apply position to the cells themselves.
为此，您还必须定位表格单元格（以便内容的绝对定位是相对于表格单元格的）——和/或，为了支持 Firefox，在表格单元格中放置一个额外的 div，因为 Firefox 没有让您将位置应用于单元格本身。
For example, I'm using this HTML:
例如，我正在使用这个 HTML：
<td><div class="bigimg"><img src="...."/></div></td>
Together with the following CSS, so that the size of the image doesn't affect the size of the cell which contains it:
连同以下 CSS，使图像的大小不会影响包含它的单元格的大小：
div.bigimg
{
height: 100%;
width: 100%;
position: relative;
}
div.bigimg > img
{
position: absolute;
top: 0;
left: 0;
}
I set the heightand widthof div.bigimgto 100%to match the size of the tdwhich contains it, because I'm using JavaScript to resize the images at run time to fit their containers, which are the div.bigimg.
我设置height和width的div.bigimg，以100%匹配的大小td其中包含它，因为我使用JavaScript来调整在运行时图像以适合它们的容器，这是div.bigimg。
Here's another example, using text instead of images -- same principle though, i.e. position: absolute inside position: relative inside each cell and the cells don't fit the content.
这是另一个示例，使用文本而不是图像——尽管原理相同，即位置：绝对内部位置：每个单元格内部的相对位置，并且单元格不适合内容。
回答by Galvani
I have managed to do this without fixed table layout. The cell's css:
我设法在没有固定表格布局的情况下做到了这一点。单元格的css：
.dataCell {
display: table-cell;
padding: 2px 15px 2px 15px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: auto;
max-width: 1px;
}
回答by mu is too short
You could try to pick a single cell to chew up all the space and set that to 100% height and width:
您可以尝试选择一个单元格来占用所有空间并将其设置为 100% 的高度和宽度：
<table>
<tr>
<td>Hi There.</td>
<td>x</td>
</tr>
<tr>
<td>Here is some text.</td>
<td class="space-hog"></td>
</tr>
</table>
and some CSS:
和一些 CSS：
table {
width: 100%;
height: 100%;
}
td {
white-space: nowrap;
}
td.space-hog {
width: 100%;
height: 100%;
}
And a live example. You need to be careful to avoid unpleasant line wrapping when .space-hogdoes its thing, hence the white-space: nowrap. If you put the .space-hogin the last row then you can avoid pushing the interesting parts down.
还有一个活生生的例子。您需要小心避免在.space-hog执行时出现令人不快的换行，因此white-space: nowrap. 如果将 放在.space-hog最后一行，则可以避免将有趣的部分向下推。
回答by Vinnie James
You can also lock the cells to a percentage, in order to maintain responsiveness, eg:
您还可以将单元格锁定为百分比，以保持响应能力，例如：
td:first-child, th:first-child {
width: 20%;
}
// assuming you have 8 remaining columns (20 + 10*8 = 100%)
td:not(:first-child), th:not(:first-child) {
width: 10%;
}
回答by nchpmn
Something along the lines of using overflow:hidden;perhaps?
overflow:hidden;可能使用的东西？
回答by Jake
td{ width:50%; }will work until the table gets small enough.
td{ width:50%; }将工作，直到表变得足够小。
回答by Amy Liu
Add table-layout:fixed;to the table's styling.
添加table-layout:fixed;到表的样式。
If you notice this helps fix the width but not the height, this is because there might still exist some sort of padding within each td cell. Add padding:0px;to the td's styling.
如果您注意到这有助于修复宽度而不是高度，这是因为每个 td 单元格中可能仍然存在某种填充。添加padding:0px;到 td 的样式。
