Stellen Sie die Mindestbreite in <td> der HTML-Tabelle ein

76

Meine Tabelle hat mehrere Spalten.

Jede Spalte sollte eine dynamische Breite haben, die von der Größe des Browserfensters abhängt. Andererseits darf jede Spalte nicht zu klein sein. Also habe ich versucht, min-widthfür diese Spalten festzulegen, aber es ist keine gültige Eigenschaft. Versuchte min-widthfür <td>so gut , aber das ist auch eine ungültige Eigenschaft.

Gibt es eine Möglichkeit, min-widthin der HTML-Tabelle für col / td festzulegen?

html css html-table Thanhma San
quelle
3
Fügen Sie ein <div> in das <td> ein und stellen Sie es auf die gewünschte Breite ein
Shadow
3
Wenn Sie unbedingt <td> verwenden müssen, sollten Sie Folgendes
Stacey Garrison
mit px - ja; mit% - nein :(
dszakal

Antworten:

68

Probier diese:

<table style="border:1px solid">
<tr>
    <td style="min-width:50px">one</td>
    <td style="min-width:100px">two</td>
</tr>
</table>
Erweitern Sie das Snippet

Ali Sağırvelioğulları
quelle
6
Dies ist die akzeptierte Antwort, aber wenn Sie sich die Antwort unten ansehen : stackoverflow.com/a/29379832/207552 , sieht es so aus, als wären die Ergebnisse undefiniert.
Bschandramohan
Sehr schlechte Methode! 1) Die Verwendung absoluter Breiten ist völlig inakzeptabel und 2) Man muss diesen Stil redundant für alle <td> s in der Tabelle wiederholen, anstatt ihn nur einmal in einem Stylesheet zu verwenden!
Apostolos
@Apostolos Warum sind absolute Breiten nicht akzeptabel? Das hängt vom Anwendungsfall ab. Natürlich können Sie auch geeignete Selektoren und / oder Klassennamen anstelle von Inline-Stilen verwenden. Dies ist nur ein minimales Beispiel. Das Problem mit dieser Antwort ist, dass die Spezifikationen sagen, dass es undefiniertes Verhalten hat.
Trixn
Es ist schlecht, weil 1) es von der Bildschirmbreite abhängt und 2) es für alle Tabellen gilt , die möglicherweise nicht in Ordnung sind. (1) wird unter Verwendung von Prozentsätzen behandelt und (2) wird unter Verwendung von Klassennamen behandelt.
Apostolos
38

min-widthund max-widthEigenschaften funktionieren nicht so, wie Sie es für Tabellenzellen erwarten. Aus Spezifikation :

In CSS 2.1 ist die Auswirkung von 'min-width' und 'max-width' auf Tabellen, Inline-Tabellen, Tabellenzellen, Tabellenspalten und Spaltengruppen undefiniert.

Dies hat sich in CSS3 nicht geändert.

ov
quelle
11
Tatsächlich hat sich dies im CSS3-Box-Modell geändert und die Eigenschaften werden auf "alle Elemente außer nicht ersetzten Inline-Elementen, Tabellenzeilen und
Zeilengruppen
min-width und max-width auf td funktionieren mit px, aber nicht mit% (neuestes Chrome)
dszakal
8

Versuchen Sie, ein unsichtbares Element (oder Pseudoelement) zu verwenden, um das Erweitern der Tabellenzelle zu erzwingen.

td:before {
  content: '';
  display: block; 
  width: 5em;
}

JSFiddle: https://jsfiddle.net/cibulka/gf45uxr6/1/

Petr Cibulka
quelle
3
Ihr Link ist tot und Ihre Lösung hat bei mir nicht funktioniert!
Mojtaba
2
Ich denke, das wird nicht funktionieren, wenn du hast table-layout: fixed;.
sr9yar
0 
<table style="min-width:50px; max-width:150px;">
    <tr>
        <td style="min-width:50px">one</td>
        <td style="min-width:100px">two</td>
    </tr>
</table>

Dies funktioniert bei mir mithilfe eines E-Mail-Skripts.

Redous
quelle
Dann sollte dies ein Kommentar sein, keine Antwort, Mein Herr
Thanhma San
-1

Eine Möglichkeit sollte sein, ein <div style="min-width:XXXpx">innerhalb des td hinzuzufügen und das zu lassen<td style="width:100%">

user9413974
quelle
-1

Wenn Sie eine feste Layouttabelle verwenden, dh datierbar

<td style="display:inline-block; min-width: 「…」px;">Foo</td>

OR

<td style="display:inline-block; min-width: max-content;">Bar</td>
Hassan Tareq
quelle
-3 
<table style="border:2px solid #ddedde">
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
</table>
AmirtharajCVijay
quelle
4
Definieren Sie die Breite in Prozent, machen Sie sie einfach dynamisch
basierend