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>

Answer 2

确保将桌子的宽度设置为100％。宽度为100％的输入将仅扩展到其父元素的100％。由于表格自然不是100％宽（仅与其内容一样宽），因此您最终会得到奇怪的输入。

就个人而言，我只会找到一个有效的宽度，并坚持使用它为标签的单元格。特别是如果你在多个页面上这样做，那么它就会保持一致。

由于你正在使用常见的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>

需要注意的是，基于表格的布局是一种非常糟糕的方式，但是要用最了解的东西来完成工作。

使HTML表格列尽可能小但不小

2 个答案:

演示（JsFiddle）