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:
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:
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>
:
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;"> </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;"> </div>
<input type="text" value="50" size="3" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich bin mir nicht 100% sicher, ob das funktioniert, ohne dass Sie bieten ein funktionierendes Beispiel für mich zu ändern (vielleicht jsfiddle oder so ähnlich). Aber vielleicht könnten Sie versuchen, das entfernen des
float: left;
- und set -display: inline-block;
auf den Schieberegler und Textfeld. Wenn das nicht funktioniert, dann versuchen Siewhite-space: nowrap;
auf die Zelle.Ok, nun kann man den Stil der Eingangs - / Schieberegler, wie Sie wollen, so lange, wie Sie mithilfe einer Auswahl, die spezifisch genug ist und Sie die !wichtiges Stichwort; ich persönlich hasse es mit, aber es gibt einige Situationen, wenn Sie müssen. Die Chrome verwenden, sollten Sie in der Lage, um zu sehen, die genaue Quelle, sobald es erstellt wurde, und Stil. Verwenden Sie diese, um zu entscheiden, wie es Ziel.
Ich habe gerade einen Blick auf den Schieberegler, Website und <Sarkasmus>ich LIEBE, wie zugänglich es ist,</Sarkasmus>; es nimmt ab, wenn Sie Tippen Sie auf die up -, page up-oder insert-Taste und erhöht für die Gegensätze. 😀
Habe es nach zour Vorschlag! Lösung: Anzeige:inline-block slider-element über extraclass. Hinzugefügt white-space:nowrap zu enthalten, td.
InformationsquelleAutor ClarkeyBoy
<td style="white-space:nowrap; width:1%">...</td>
space, tab & enter
mit
float:left
auf SchiebereglerHinzufügen
display:inline-block
zwischenclass="fd-slider-handle" role="slider"
d.h.class="fd-slider-handle" style="display:inline-block" role="slider"
Oder Sie können die css-Datei Bearbeiten; ändern
display:block
zudisplay:inline-block
in der Klasse.fd-slider-handle
Hinzufügen
display:inline-block
zwischenclass="fd-slider-handle" role="slider"
d.h.class="fd-slider-handle" style="display:inline-block" role="slider"
Oder Sie Bearbeiten die css-Datei, ändern
display:block
zudisplay:inline-block
in der Klasse.fd-slider-handle
InformationsquelleAutor Atul Gupta
Habe ich nicht Sie Weg zu speficy "genau die Größe, die der regler+Eingang content", aber vielleicht dies wird Ihnen helfen, (??) :
--> und wenn Sie halten Sie Ihre zweite Lösung, in dem Sie angeben width="1%" und fügen Sie das Schlüsselwort nowrap in das entsprechende td an ?
InformationsquelleAutor Nico
Versuchen Sie, 'width=100%" auf dem Bereich Spalte, und fügen Sie 'nowrap' auf alle anderen Spalten. Dieser (ich hoffe) wird die Kraft der Sektor Spalte zu nehmen so viel Platz wie Sie können, squishing die anderen Spalten in Ihrer kleinsten Größe. Wenn das funktioniert, würden Sie wahrscheinlich benötigen Sie ein wenig Polsterung um jede Spalte für ein schönes Aussehen.
InformationsquelleAutor Ray