Question

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.”

Is there a way to do this in raw html/CSS or do I have to resort to Javascript?

(Obviously if the page is very narrow this is not achievable, but I’m not worried about really narrow browsers.)

Answer 1

As long as you don’t set width for the table,tr or 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.

Demo (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>