Feste Tabellenzellenbreite

Viele Leute verwenden immer noch Tabellen, um Steuerelemente, Daten usw. zu gestalten - ein Beispiel dafür ist das beliebte jqGrid. Es passiert jedoch etwas Magisches, das ich nicht zu ergründen scheinen 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 zu befolgen, wie es jqGrid tut? Wenn ich versuche, dies zu replizieren <td style='width: 20px'>, wird die Zelle erweitert , selbst wenn ich alle festlege , sobald der Inhalt einer dieser Zellen größer als 20 Pixel ist!

Irgendwelche Ideen oder Einsichten?

Sie können versuchen, das <col>Tag-Tabellen-Styling für alle Zeilen zu verwenden, müssen jedoch den table-layout:fixedStil für die <table>CSS-Klasse oder die Tabelle festlegen und den overflowStil für die Zellen festlegen

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; }

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

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 die Tabellen widthauch in der Spuklösung einstellen . Sonst funktioniert es nicht.
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

table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

Ich hatte eine lange Tabelle td Zelle, dies zwang die Tabelle an die Ränder des Browsers und sah hässlich aus. Ich wollte nur, dass diese Spalte nur eine feste Größe hat und die Wörter bricht, 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 keinen Stil für Tabellen- und Tr-Elemente angeben. Sie können auch Überlauf verwenden: versteckt; wie von anderen Antworten vorgeschlagen, aber es führt dazu, dass der überschüssige Text verschwindet.

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

10x10

für FULLSCREEN-Breitentabelle:

• Tischbreite MUSS 100% sein

• Wenn N Spalten benötigt werden, MÜSSEN THs N + 1 sein

Beispiel für 3 Spalten:

table.fixed {
      table-layout: fixed;
      width: 100%;
    }
    table.fixed td {
      overflow: hidden;
    }

  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>

table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

: erstes Kind ...: n-tes Kind (1) oder ...