it-swarm.com.de

Feste Tabellenzellenbreite

Noch immer verwenden viele Benutzer Tabellen, um Steuerelemente, Daten usw. zu gestalten. Ein Beispiel hierfür ist das beliebte jqGrid. Es passiert jedoch etwas Magisches, das ich mir nicht vorstellen kann (seine Tische zum lauten Schreien, wie viel Magie könnte es möglicherweise geben?)

Wie ist es möglich, die Spaltenbreite einer Tabelle festzulegen und sie zu befolgen, wie es jqGrid tut? Wenn ich versuche, dies zu replizieren, selbst wenn ich jeden <td style='width: 20px'>, sobald der Inhalt einer dieser Zellen größer als 20px ist, wird die Zelle erweitert!

Irgendwelche Ideen oder Einsichten?

159
Jimbo

Sie könnten versuchen, die <col>-Tag verwaltet das Tabellen-Styling für alle Zeilen, aber Sie müssen das table-layout:fixed Stil auf dem <table> oder die Tabellen CSS-Klasse und legen Sie den overflow -Stil für die Zellen fest

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

und das ist dein CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
239
hunter

Jetzt in HTML5/CSS3 haben wir eine bessere Lösung für das Problem. Meiner Meinung nach ist diese reine CSS-Lösung zu empfehlen:

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/
<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

Sie müssen das width der Tabelle auch in Spuk-Lösung setzen. Sonst klappt es nicht.
Auch eine neue CSS3-Funktion, die vsync vorgeschlagen hat, ist: Word-break:break-all;. Dadurch werden die Wörter ohne Leerzeichen auch in mehrere Zeilen aufgeteilt. Ändern Sie einfach den Code wie folgt:

table.fixed { table-layout:fixed; width:90px; Word-break:break-all;}

Endergebnis

Rendered table

90
totymedli
table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  Word-wrap:break-Word;
}
12
ajreal

Ich hatte eine lange Tabelle und eine Zelle. Dadurch wurde die Tabelle an den Rand des Browsers gedrängt und sah hässlich aus. Ich wollte nur, dass diese Spalte nur eine feste Größe hat und die Wörter unterbricht, wenn sie die angegebene Breite erreicht. Das hat bei mir also gut funktioniert:

<td><div style='width: 150px;'>Text to break here</div></td>

Sie müssen für table, tr-Elemente keinen Stil angeben. Sie können auch den Überlauf verwenden: hidden; Wie in anderen Antworten vorgeschlagen, führt dies jedoch dazu, dass der überschüssige Text verschwindet.

10
Tarik
table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

0
user1993774