[HTML/CSS] Spaltenbreite bei Tabelle an Inhalt anpassen

scrontch

Hallo,

könnt ihr euch mal folgende Tabelle im Browser anschauen:
(Beispiel stark vereinfacht)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Table</title>
</head>
<body>
  <div style="width:40em";>
    <table width="100%" border="1">
      <thead>
        <tr><th>Sector</th><th width="1%">Weight</th></tr>
      </thead>
      <tbody>
          <tr>
            <td>Urban Infrastructure</td>
            <td>
              <div style="width:120px; background-color:#BBB; float:left;">&nbsp;</div>
              <input type="text" value="50" size="3" />
            </td>
          </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Das innere DIV stellt später einen Slider dar. Ist jetzt mal nicht wichtig, nur dass es konstante Größe hat.

Das Problem:
Ich hätte gerne, dass die letzte Spalte automatisch die Größe des Inhalts annimmt (deshalb bewusst width="1%", damit zuwenig), und zwar so, dass der Inhalt (also div+input) auf einer Zeile liegt und nicht umgebrochen wird.
Ich verzweifel da dran.

Habe auf anraten schon

<td style="display:inline; white-space:nowrap;">

probiert, aber ohne Erfolg (könnt ja selbst schauen was da rauskommt!)

wer kann helfen?

SideWinder

HTML ist einfach furchtbar kompliziert. DIV ist ein Block-Element und du musst es auf inline stellen damit es in einer Zeile mit anderem Content sein kann. Damit es aber die Width beibehält muss es auch ein Block sein => Ergo: inline-block

Der Zeilenumbruch wird dir weiters einen kleinen Abstand zwischen DIV und INPUT legen, weiß ich auch bis heute nicht warum das so sein muss.

Ansonsten ist dein Problem die Tabellen-width. So geht's:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Table</title>
</head>
<body>
  <div style="width:40em">
    <table border="1">
      <thead>
        <tr><th>Sector</th><th>Weight</th></tr>
      </thead>
      <tbody>
          <tr>
            <td>Urban Infrastructure</td>
            <td>
              <div style="display: inline-block; width:120px; background-color:#BBB">&nbsp;</div><input type="text" value="50" size="3" />
            </td>
          </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Allerdings ist deine Tabelle dann weniger schmal, kannst du aber mit width in der ersten Column regulieren bzw. bspw. mit padding-right in der ersten Column.

MfG SideWinder

Shade Of Mine

Naja, white-space:nowrap braucht man schon, wenn man der Tabelle keine fixe Breite geben will...

Nur das float:left; in scrontchs Code stoert und man braucht Sides display:inline-block;

Dann kann die Tabelle naemlich schoen dynamisch sein und dennoch nicht umbrechen.

scrontch

Also habt ihr das auch mal ausprobiert??
Weil ich hab jetzt das und es sieht aber immer noch gleich aus.

<table width="100%" border="1">
      <thead>
        <tr><th>Sector</th><th width="1%">Weight</th></tr>
      </thead>
      <tbody>
          <tr>
            <td>Urban Infrastructure</td>
            <td>
              <div style="display:inline-block; width:120px; background-color:#BBB; white-space:nowrap;">&nbsp;</div>
              <input type="text" value="50" size="3" />
            </td>
          </tr>
      </tbody>
    </table>

Shade Of Mine

scrontch schrieb:

Also habt ihr das auch mal ausprobiert??

Klar.

Das white-space:nowrap muss ins td rein.
Das width bei der th kannst du weglassen, mach sowas lieber ueber colgroups. Aber prinzipiell musst du in deinem Code nur das white-space:nowrap ins td schieben und fertig.

scrontch

Super! Funktioniert. Danke!
Jetzt muss ich das mit dem richtigen Slider ausprobieren.