使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的文本就会在一行中。如果空间不够，您可以使用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>