HTML Tabelle: Legen Sie die Breite der Spalte zu passen, schweben Inhalt

Ich brauche einige Ratschläge, wie Sie die Spaltenbreite festlegen, die in einer HTML-Tabelle.
Ich habe eine einfache Tabelle, die sich über die gesamte Breite des übergeordneten div.
(Mit table width="100%")

Hier ist der render:

HTML Tabelle: Legen Sie die Breite der Spalte zu passen, schweben Inhalt

Was ich erreichen will ist, dass die Letzte Spalte "Gewicht" wird genau die Größe der enthaltenen Elemente.
Die enthaltenen Elemente werden der Schieberegler und eine text-Eingabe. Der Schieberegler schwebte überlassen.

Zunächst dachte ich an eine Einstellung kleiner als die erforderliche Größe für die Letzte Spalte (z.B. width="1%"), so dass die Spalte automatisch anpassen, um die minimale Größe.
Aber dann ist das problem, dass der Inhalt wraps:

HTML Tabelle: Legen Sie die Breite der Spalte zu passen, schweben Inhalt

Also, wie kann ich angeben, eine Feste Größe für die Letzte Spalte, das ist genau die Größe, die der regler+Eingang Inhalt, wohl wissend, dass der slider hat Feste Größe in Pixel, aber der Eingang hat die Größe in "em", d.h. es wird davon abhängen, schriftart-Einstellungen, usw.

Edit1

(Siehe Kommentar von Atul Gupta.)

Mit <td style="white-space:nowrap; width:1%">...</td>:

HTML Tabelle: Legen Sie die Breite der Spalte zu passen, schweben Inhalt

Edit2

Wenn dies wichtig sein könnte, das Schieberegler-Steuerelement ist tatsächlich entnommen:
Unauffällig Schieberegler-Steuerelement V2

Ich habe nie herausgefunden, die details, aber es dynamisch Hinzugefügt, um den text <input>.

Ich war in der Lage, schweben Links, indem Sie eine extra-Klasse mit float:left;

Paar mehr Infos:

Der slider und der text-input instanziiert sind, wie diese:

<input name="w-e2-09" id="w-e2-09" type="text" title="Range: 0 - 100" class="fd_slider fd_jump fd_slider_cn_extraclass" value="50"  maxlength="3" size="3" />

fd_slider_cn_extraclass macht der regler intern verwenden:

div.extraclass
{
  width:120px;
  float:left;
}

Wenn ich das weglasse float left, den text im Feld bricht in die nächste Zeile, wie im zweiten screenshot (auch wenn Platz vorhanden ist). Deshalb habe ich Hinzugefügt, float left.

Edit3

Hier der vollständige HTML-details der Tabellenzeile (nach slider JS einfügen), wie Firebug:

<tr>
            <td><img src="images/buildings/city.png"></td>
            <td>Urban Infrastructure</td>
            <td class="numeric em">13 <i>(+2)</i></td>
            <td class="numeric">10</td>
            <td>
              <div class="fd-slider extraclass" id="fd-slider-w-e2-09" aria-disabled="false"><span class="fd-slider-inner"></span><span class="fd-slider-bar"></span><button type="button" class="fd-slider-handle" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-valuetext="50" style="left: 50px;">&nbsp;</button></div><input type="text" size="3" maxlength="3" value="50" class="fd_slider fd_jump fd_slider_cn_extraclass" title="Range: 0 - 100" id="w-e2-09" name="w-e2-09">
            </td>
</tr>

Den Schieberegler zugehörigen CSS ist erhältlich über diesen link:
http://www.frequency-decoder.com/demo/slider-v2/slider-v2.zip

Edit4

Hier ist eine minimale HTML-Beispiel, das veranschaulicht das Problem und kann als ein Labor:

Ersetzt habe ich den regler durch eine einfache Feste Größe div. Das Ergebnis ist das gleiche.

<!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 style="display:inline; white-space:nowrap;">
              <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>
Warum nimmst du nicht die Summe der Breite der enthaltenen Elemente, dann legen Sie die Breite der letzten '<td>' um ein Update Wert?
slider size="120px" input size="3" (Zeichen) Also, was ist die Summe bitte?
Nein Nein Nein ... geben Sie eine Größe, um die Eingabe auch mit css; alle folgenden Lösungen sind hack-ish, und wenn Sie vermeidbar sind, und nach meiner Meinung sind Sie sollten Sie verwenden Sie eine saubere und pflegeleichte Lösung ... geben Sie die Abmessungen, die Summe und schon ist es passiert!.. weitere mehr, wenn Sie wollen/müssen der Verfügbarkeit für die Benutzer, die Verwendung von "em" - Einheiten.

InformationsquelleAutor Scrontch | 2011-09-11

Schreibe einen Kommentar