使 HTML 表格列尽可能小但不能更小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6670692/
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
Making an HTML table column as small as possible but no smaller
提问by Fred Thomas
I have a column with labels and corresponding text boxes, viz:
我有一列带有标签和相应的文本框，即：
<table>
<tr>
<td>Label:</td>
<td><input type="text"></input></td>
</tr>
<tr>
<td>longer label:</td>
<td><input type="text"></input></td>
etc...
I want to ensure the first column is wide enough to allow the text in one line, but no wider than necessary, that to allow maximum space for the input boxes (which are set to width 100%). So I don't want to set a specific percentage or explicit width, just something to say "as small as possible but no smaller."
我想确保第一列足够宽以允许一行中的文本，但不能超过必要的宽度，以便为输入框（设置为宽度 100%）提供最大空间。所以我不想设置特定的百分比或明确的宽度，只是想说“尽可能小但不能更小”。
Is there a way to do this in raw html/CSS or do I have to resort to Javascript?
有没有办法在原始 html/CSS 中做到这一点，还是我必须求助于 Javascript？
(Obviously if the page is very narrow this is not achievable, but I'm not worried about really narrow browsers.)
（显然，如果页面非常窄，这是无法实现的，但我并不担心真正窄的浏览器。）
采纳答案by Sotiris
As long as you don't set width for the table,tror td, td's text will be in one line. If the space is not enough you can use td {white-space:nowrap}. This will not allow the text to go to second line, but will show a scrollbar.
只要您不为table、tr或设置宽度td，td的文本就会在一行中。如果空间不够，您可以使用td {white-space:nowrap}. 这将不允许文本转到第二行，但会显示滚动条。
Demo (JsFiddle)
演示 ( JsFiddle)
td {white-space:nowrap}<table>
<tr>
<td>Label:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>longer label:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>longeeeeeeeeeest label:</td>
<td><input type="text"></td>
</tr>
</table>回答by Joshua
Make sure to set your table's width to 100% as well. An input with 100% width will only expand to 100% of it's parent element. Since a table is not naturally 100% wide (only as wide as its content) you can end up with oddly sized inputs.
确保将表格的宽度也设置为 100%。宽度为 100% 的输入只会扩展到其父元素的 100%。由于表格不是自然 100% 宽（仅与其内容一样宽），因此您最终可能会遇到大小不一的输入。
Personally, I would just find a width that works and stick with it for the label's cells. Especially if you're doing this across multiple pages so that it's stays consistent.
就个人而言，我只会找到一个有效的宽度并坚持用于标签的单元格。特别是如果您跨多个页面执行此操作以保持一致。
Since you're doing something very specific with common HTML elements, I would highly suggest giving them a CSS class to avoid breaking other things. Your table and CSS could look something like this:
由于您正在对常见的 HTML 元素做一些非常具体的事情，我强烈建议给它们一个 CSS 类以避免破坏其他东西。您的表格和 CSS 可能如下所示：
<style type="text/css">
table.form{width:100%}
td.label{width:150px;white-space:nowrap;}
td input{width:100%;}
</style>
<table class="form">
<tr>
<td class="label">My label:</td>
<td><input type="text" /></td>
</tr>
</table>
The caveat to this is that the table based layout is a really bad way to go, but work with what ya know best and gets the job done.
需要注意的是，基于表格的布局是一种非常糟糕的方式，但要使用您最了解的内容并完成工作。
