Breite einer Tabellenspalte/-zelle möglichst klein?

[Rolf b]

Lass die Breitenangabe der 3. Spalte einfach weg. Dann kannst Du die beiden Label-Spalten auf width:1em setzen. Damit er nicht umbricht, nimm noch white-space:pre hinzu. Und weil er dann die Umbrüche um deinen Text auch mitnimmt, setze ein span drumherum und gibt DEM das white-space:pre :).

Wenn die ganze Table eine bestimmte Breite bekommen soll, kannst Du auch der table eine width geben und das input Element auf width=100% stylen.

Das <br> vor dem Eingabefeld kann man mit einem display:block span auch loswerden, oder man macht aus dem Label ein flex-Layout. Das ist jetzt allerdings Korinthenk…rei.

Markup:

<table cellpadding="5" border="1">
 <tbody>
  <tr>
    <td colspan="3">
       <label>
          <span>Label 1</span>
          <input id="inp" type="text">
       </label>
    </td>
  </tr>
  <tr>
   <td>
      <span>Label 2.1</span>
   </td>
   <td>
      <span>Label 2.2</span>
   </td>
   <td class="bigger">
      bigger
   </td>
  </tr>
 </tbody>
</table>

CSS:

/* so */
table { width: 620px; }
#inp { width: 100%; }

/* oder so */
#inp { width: 600px; }

/* und in beiden Fällen dies dazu */
tr:nth-of-type(1) span { display:block; }

tr:nth-of-type(2) td:not(.bigger)  {
  width: 1em;
}

tr:nth-of-type(2) td:not(.bigger) span {
  white-space: pre;
}

Nur frage ich mich gerade zweierlei.

(1) Ist es gut, die "bigger" Zelle per class zu identifizieren?

(2) Was hast Du mit dem Konstrukt vor? Table-Layout? Da gibt es bessere Möglichkeiten.

Rolf