html - 使 HTML 表格列尽可能小但不能更小

Question

我有一列带有标签和相应的文本框，即:

<table>
  <tr>
  <td>Label:</td>
  <td><input type="text"></input></td>
  </tr>
  <tr>
  <td>longer label:</td>
  <td><input type="text"></input></td>
  etc...

我想确保第一列的宽度足以让文本排成一行，但不要超过必要的宽度，以便为输入框留出最大空间(宽度设置为 100%)。所以我不想设置一个特定的百分比或明确的宽度，只是说“尽可能小但不能更小”。

有没有办法在原始 html/CSS 中执行此操作，还是我必须求助于 Javascript？

(显然，如果页面非常窄，这是无法实现的，但我不担心真正窄的浏览器。)

Answer 1

只要您不为table、tr 或td 设置宽度，td' s 文本将在一行中。如果空间不够，您可以使用 td {white-space:nowrap}。这将不允许文本转到第二行，但会显示一个滚动条。

演示 ( 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>