Wie kann ich festlegen, die im HTML-oder CSS-die absolute minimale Breite einer Tabellenzelle

Question

Zusammenfassung

Was ist der beste Weg, um sicherzustellen, eine Zelle in der Tabelle kann nicht kleiner als eine bestimmte Mindest-Breite.

Beispiel

Ich möchte sicherstellen, dass alle Zellen in einer Tabelle werden mindestens 100px breit Bezug auf die Breite der Tabellen-container.Wenn es mehr Platz auf den Zellen der Tabelle soll diese Lücke füllen.

Browser-Kompatibilität

Ich würde ich gerne eine Lösung finden, die funktioniert in

• IE 6-8
• FF 2-3
• Safari

In der Reihenfolge der Präferenz.

Answer 1

sollten Diese CSS genügen:

td { min-width: 100px; }

Allerdings ist es nicht immer korrekt (das min-width-Attribut) von allen Browsern gehorcht (zB IE6 nicht mag es sehr viel).

Edit: Wie für eine IE6 (und vor) Lösung gibt es nicht eine, die unter allen Umständen zuverlässig funktioniert, soweit ich weiß. ist das nowrap HTML-Attribut nicht wirklich das gewünschte Ergebnis zu erreichen, als dass nur Zeilenumbrüche in der Zelle verhindert, anstatt eine Mindestbreite angeben.

Wenn jedoch nowrap in Verbindung mit einer regelmäßigen Zellenbreite Eigenschaft verwendet wird (wie die Verwendung von width: 100px), wird die 100px handeln wie eine minimale Breite, und die Zelle werden nach wie vor mit dem Text erweitern (aufgrund der nowrap). Dies ist eine weniger als ideale Lösung, die nicht vollständig CSS und als solche angewendet werden kann, verwendet wird, zu implementieren wäre langweilig, wenn Sie viele Tabellen haben Sie wollen, dies zu beantragen. (Natürlich ist diese ganze alternative Lösung fällt nach unten, wenn Sie dynamischen Zeilenumbrüche in Ihren Zellen haben wollen, sowieso).

Answer 2

Ein weiterer Hack ist der alte 1x1 transparenter Pixel Trick. Legen Sie ein 1x1 transparentes GIF-Bild und legen Sie seine Breite in dem Bild-Tag auf die gewünschte Breite. Dadurch wird die Zelle zwingen, zumindest so breit wie das Bild zu sein.

Answer 3

Ich weiß, dass dies eine alte Frage, aber ich dachte, dass ich etwas teilen würde, die nicht erwähnt wurde (Obwohl vom Konzept her recht einfach ..) Sie nur eine <div> in der Tabelle setzen können (in einen des <td> ist oder etwas) und stellen Sie die <div> min-width. der Tisch wird auf dem <div> Breite zu stoppen. Nur dachte ich, dass da draußen für den Fall werfen würde jemand über diese auf Google kommt. Auch ich bin nicht so sicher, wie min-width in I.E6 gehandhabt wird. aber das hat sich bereits in einer anderen Antwort abgedeckt.

Answer 4

Ich hatte einen gewissen Erfolg mit:

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

Auf der Basis einer Kombination von Vatos' Antwort und eine min-height Artikel hier: http://www.dustindiaz.com/min-height-fast-hack/

Answer 5

was ist mit dieser CSS-Eigenschaft

min-width: 100px

, aber es ist nicht wirklich in IE6 funktionieren, wenn nicht alles täuscht

, wenn Sie es in der CSS Art und Weise nicht tun wollen, ich nehme an, Sie dieses Attribut hinzufügen

nowrap="nowrap"

in der Tabelle Daten-Tag

Answer 6

Dies ist ein Cross-Browser-Weg minimale Breite und / oder mimimum Höhe für die Einstellung:

{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}

IE 6 nicht versteht! Important
IE 6 sieht Breite / Höhe: 200px (Überschreiben auto)

Andere Browser verstehen die Min- und die! Important

Ich bin nicht 100% vertraut mit dem Verhalten von Breiten in TD-Elementen, aber das alles funktioniert gut auf zB DIV-Tags

BTW:

  

Auf der Basis einer Kombination von Vatos' Antwort und eine min-height Artikel hier: http : //www.dustindiaz.com/min-height-fast-hack/

Dies ist nicht wegen der Reihenfolge der ersten zwei Linien arbeitet, müssen sie in der richtigen Reihenfolge (über die oben denkt) sein;)

Answer 7

IE6 Griffe Breite als min-width:

td {
    min-width: 100px;
    _width: 100px;/* IE6 hack */
}

Wenn Sie IE6 wollen Breite wie normale Browser zu handhaben, geben sie einen Überlauf: sichtbar; (Hier nicht der Fall)