Lock-Tabellenzellen auf ihre Standardgröße unabhängig vom Inhalt

Question

Wenn ich

<table> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

und

table 
    { width: 100%; height: 100%; } 

Jede Zelle einen gleichen Viertel der Tabelle einnimmt, und der Tisch erstreckt sich das Fenster passen .

Wie kann ich verhindern, dass sich diese Tabellenzellen an den Inhalt in den Zellen anpassen (während sie immer noch an den Container der Tabelle angepasst sind)?

Answer 1

Sie könnten versuchen, table-layout:fixed; - das legt das Layout auf eine bestimmte feste Größe (in CSS angegeben) und ignoriert den Inhalt der Zellen, so dass die Breite der Zelle nie ändert. Ich bin mir nicht sicher, ob dies das vertikale Layout beeinflusst oder nicht.

More info on w3schools.

Answer 2

td{ width:50%; } wird funktionieren, bis die Tabelle klein genug wird.

Answer 3

Sie könnten versuchen, eine einzelne Zelle holen den ganzen Raum zu kauen und die Höhe auf 100% gesetzt und Breite:

<table> 
    <tr> 
     <td>Hi There.</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td>Here is some text.</td> 
     <td class="space-hog"></td> 
    </tr> 
</table> 

und einige CSS:

table { 
    width: 100%; 
    height: 100%; 
} 
td { 
    white-space: nowrap; 
} 
td.space-hog { 
    width: 100%; 
    height: 100%; 
} 

Und ein live example. Sie müssen vorsichtig sein, um unangenehme Zeilenumbruch zu vermeiden, wenn .space-hog seine Sache macht, daher die white-space: nowrap. Wenn Sie die .space-hog in die letzte Zeile setzen, können Sie vermeiden, die interessanten Teile nach unten zu schieben.

Answer 4

Etwas in Richtung der Verwendung von overflow:hidden; vielleicht?

Answer 5

Sie können es tun, indem Sie position: absolute auf den Inhalt der einzelnen Tabellenzellen verwenden: denn wenn Sie dann tun, hat die Größe des Inhalts keinen Einfluss auf die Größe der Zelle.

Dazu müssen Sie dann auch die Tabellenzellen positionieren (damit die absolute Positionierung des Inhalts relativ zur Tabellenzelle ist) - and/or, to support Firefox, position an extra div within the table cells da Firefox es nicht erlaubt, die Position auf die Zellen selbst anzuwenden.

Zum Beispiel verwende ich HTML:

<td><div class="bigimg"><img src="...."/></div></td> 

Zusammen mit dem folgenden CSS, so dass die Größe des Bildes nicht die Größe der Zelle beeinflusst, die sie enthält:

div.bigimg 
{ 
    height: 100%; 
    width: 100%; 
    position: relative; 
} 
div.bigimg > img 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

stelle ich die height und width von div.bigimg-100% die Größe des td passen, die es enthält, weil ich bin mit JavaScript die Bilder zur Laufzeit, um die Größe ihre Behälter passen, die sind die .

Answer 6

Ich habe es geschafft, dies ohne festes Tabellenlayout zu tun. die CSS-Zelle:

.dataCell { 
    display: table-cell; 
    padding: 2px 15px 2px 15px; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    width: auto; 
    max-width: 1px; 
} 

Answer 7

hinzufügen table-layout:fixed; auf das Styling der Tabelle.

Wenn Sie bemerken, dass dies hilft, die Breite, aber nicht die Höhe zu beheben, liegt das daran, dass in jeder td-Zelle möglicherweise noch eine Art Polsterung vorhanden ist. Fügen Sie padding:0px; zum Styling des tds hinzu.

Answer 8

Sie können auch die Zellen auf einen bestimmten Prozentsatz sperren, um die Reaktions zu halten, zum Beispiel:

td:first-child, th:first-child { 
    width: 20%; 
    } 
    // assuming you have 8 remaining columns (20 + 10*8 = 100%) 
    td:not(:first-child), th:not(:first-child) { 
    width: 10%; 
    }