Imposta la larghezza della colonna della tabella costante indipendentemente dalla quantità di testo nelle sue celle?

Nella mia tabella ho impostato la larghezza della prima cella in una colonna di 100px .
Tuttavia, quando il testo in una delle celle di questa colonna è troppo lungo, la larghezza della colonna diventa superiore a 100px . Come posso disabilitare questa espansione?

Ci ho giocato un po ‘perché ho avuto dei problemi a capirlo.

È necessario impostare la larghezza della cella (o th o td ha funzionato, ho impostato entrambi) E impostare il table-layout della table-layout fixed . Per qualche motivo, la larghezza della cella sembra rimanere fissa solo se viene impostata anche la larghezza della tabella (penso che sia sciocco ma whatev). È utile anche impostare la proprietà di overflow su hidden.

Dovresti assicurarti di lasciare anche tutti i bordi e le dimensioni per i CSS.

Ok, ecco quello che ho.

html:

 
header 1 header 234567895678657
data asdfasdfasdfasdfasdf data 2

CSS:

 table{ border: 1px solid black; table-layout: fixed; width: 200px; } th, td { border: 1px solid black; width: 100px; } 

Eccolo in JSFiddle

Questo ragazzo ha avuto un problema simile: larghezza delle celle della tabella – larghezza di fissaggio, avvolgimento / troncamento di parole lunghe

Vedi: http://www.html5-tutorials.org/tables/changing-column-width/

Dopo il tag table, usa l’elemento col. non hai bisogno di un tag di chiusura.

Ad esempio, se avessi tre colonne:

  ... 

Basta aggiungere il tag

all’interno di

o

definire la larghezza all’interno di

. Questo ti aiuterà. Nient’altro funziona.

per esempio.

 
...............

Se hai bisogno di una o più colonne a larghezza fissa mentre le altre colonne dovrebbero ridimensionare, prova a impostare sia la min-width max-width sullo stesso valore.

Devi scrivere questo all’interno del CSS corrispondente

 table-layout:fixed; 

Quello che faccio è:

  1. Imposta la larghezza del td:

      
  2. Imposta la larghezza del td con CSS:

      
  3. Imposta nuovamente la larghezza come max e min con CSS:

      

Sembra un po ‘ripetitivo ma mi dà il risultato desiderato. Per ottenere questo risultato con estrema facilità, potresti aver bisogno di inserire i valori CSS in una class nel tuo foglio di stile:

 .td_size { width:200px; height:50px; max-width:200px; min-width:200px; max-height:50px; min-height:50px; **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/ } 

poi:

  

Posiziona l’attributo di class su qualsiasi

desiderato.

L’ho usato

 .app_downloads_table tr td:first-child { width: 75%; } .app_downloads_table tr td:last-child { text-align: center; } 

Aiuta anche a inserire l’ultima “cella di riempimento” con larghezza: auto . Questo occuperà lo spazio rimanente e lascerà tutte le altre dimensioni come specificato.

Se non si desidera un layout fisso, specificare una class affinché la colonna sia dimensionata in modo appropriato.

CSS:

 .special_column { width: 120px; } 

HTML:

 ... 

KAsun ha l’idea giusta. Ecco il codice corretto …

  
really long header
really long text

Fai in modo che la risposta accettata risponda agli schermi piccoli quando è inferiore alla larghezza fissa.

HTML:

 
header 1 header 234567895678657
data asdfasdfasdfasdfasdf data 2

CSS

 table{ border: 1px solid black; table-layout: fixed; max-width: 600px; width: 100%; } th, td { border: 1px solid black; overflow: hidden; max-width: 300px; width: 100%; } 

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

Ho trovato che la risposta di KAsun funziona meglio usando vw anziché px in questo modo:

...............

Questo era l’unico stile di cui avevo bisogno per regolare la larghezza della colonna

Non è necessario impostare "fixed" : tutto ciò che serve è impostare l’ overflow:hidden poiché la larghezza della colonna è impostata.