Larghezza cella tabella fissa

Molte persone usano ancora le tabelle per i controlli di layout, i dati, ecc. - Un esempio è il popolare jqGrid. Tuttavia, sta accadendo un po 'di magia che non riesco a capire (i suoi tavoli per gridare ad alta voce, quanta magia potrebbe esserci?)

Come è possibile impostare la larghezza della colonna di una tabella e farla obbedire come fa jqGrid !? Se provo a replicare questo, anche se imposto ogni <td style='width: 20px'>, non appena il contenuto di una di quelle celle è maggiore di 20px, la cella si espande!

Qualche idea o approfondimento?

Potresti provare a usare il <col>tag per gestire lo stile della tabella per tutte le righe ma dovrai impostare lo table-layout:fixedstile sulla <table>classe css delle tabelle o e impostare lo overflowstile per le celle

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>

e questo è il tuo CSS

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

Ora in HTML5 / CSS3 abbiamo una soluzione migliore per il problema. A mio avviso si consiglia questa soluzione puramente CSS:

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>

Devi preparare il tavolo widthanche nella soluzione di Haunter . Altrimenti non funziona.
Inoltre una nuova funzionalità CSS3 che vsync suggerito è il seguente: word-break:break-all;. Questo spezzerà le parole senza spazi in esse anche su più righe. Basta modificare il codice in questo modo:

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

Risultato finale

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

Avevo una lunga cella da tavolo, questo costringeva il tavolo ai bordi del browser e sembrava brutto. Volevo solo che quella colonna avesse solo dimensioni fisse e spezzasse le parole quando raggiunge la larghezza specificata. Quindi questo ha funzionato bene per me:

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

Non è necessario specificare alcun tipo di stile per la tabella, elementi tr. Puoi anche usare overflow: nascosto; come suggerito da altre risposte, ma fa scomparire il testo in eccesso.

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

10x10

per la tabella della larghezza FULLSCREEN:

• la larghezza del tavolo DEVE essere del 100%

• se hai bisogno di N colonne, allora DEVE essere N + 1

esempio per 3 colonne:

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

: first-child ...: nth-child (1) o ...