Breite einer Tabellenspalte/-zelle möglichst klein?

[Nightblaster]

Hallo,

man betrachte folgende Tabelle:

https://jsfiddle.net/axemhL9d/

Die erste Zeile enthält eine Zelle, die sich über drei Spalten erstreckt (<td colspan="3">) und eine Textbox enthält.

Die zweite Zeile enthält drei Zellen. Die ersten beiden enthalten Text, während die dritte leer ist. Die ersten beiden sollen eine möglichst geringe Breite haben, während die dritte den Rest ausfüllen soll.

Ich habe versucht, der dritten Zelle die Breite von "100%" zu geben, aber das ändert nichts. Nur, wenn man die Textbox in der ersten Zeile entfernt, verkleinern sich die genannten Zellen.

Wie kann man das Ziel erreichen?

Danke Magnus

[MrMurphy1]

Hallo

Die Tabelle zeigt doch das von dir geforderte Verhalten.

Die Zelle in der ersten Zeile so breit wie ihr Inhalt.

Die ersten beiden Zellen in der zweiten Zeile sind auch so breit wie ihr Inhalt.

Die dritte Zelle in der zweiten Zeile nimmt dann den Rest der Breite ein.

Gruss

MrMurphy

[Linuchs]

Die ersten beiden sollen eine möglichst geringe Breite haben, während die dritte den Rest ausfüllen soll.

So gering wie möglich ist 0. Das hast du aber nicht angegeben.

Ich habe versucht, der dritten Zelle die Breite von "100%" zu geben, aber das ändert nichts.

Das ist ein ungültigetr Wert. Eine Spalte könnte nur dann die gesamte Breite der Tabelle einnehmen, wenn es die einzige Spalte wäre.

Wie kann man das Ziel erreichen?

Du solltest das Ziel erstmal realistisch definieren. Nicht nur der Browser, auch ich habe es nicht verstanden.

Linuchs

[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

[Nightblaster]

Danke Rolf! (Wenigstens einer, der lesen kann...)

[Gunnar Bittersmann]

@@Nightblaster

(Wenigstens einer, der lesen kann...)

Einer reicht aber nicht. Es gehören zwei dazu.

Der zweite wärst du.

Ich hoffe, du kannst auch lesen (wenngleich die Hoffnung nicht sehr hoch ist). Der entscheidende Satz in Rolfs Posting war der letzte:

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

Und das Eingabefelder eine Beschriftung brauchen, hast du auch gelesen? Und verstanden?

LLAP 🖖

[Gunnar Bittersmann]

@@Nightblaster

man betrachte folgende Tabelle:

https://jsfiddle.net/axemhL9d/

Ich sehe da keine Tabelle, sondern ein zum Layouten missbrauchtes table-Element.

Die erste Zeile enthält eine Zelle, die sich über drei Spalten erstreckt (<td colspan="3">) und eine Textbox enthält.

Welches keine Beschriftung hat. Welche aber notwendig ist, damit das Eingabefeld für alle benutzbar ist.

Wie kann man das Ziel erreichen?

Mit Flexbox beispielsweise.

LLAP 🖖