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

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

Ci ho giocato un po 'perché avevo difficoltà a capirlo.

È necessario impostare la larghezza della cella (una tho entrambe td, ho impostato entrambi) E impostare table-layoutsu fixed. Per qualche motivo, la larghezza della cella sembra rimanere fissa anche se è impostata anche la larghezza della tabella (penso che sia sciocca ma whatev).

Inoltre, è utile impostare la overflowproprietà in modo hiddenda impedire che il testo aggiuntivo esca dalla tabella.

Dovresti assicurarti di lasciare anche tutto il confine e il dimensionamento per i CSS.

Ok quindi ecco quello che ho:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Eccolo in JSFiddle

Questo ragazzo aveva 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:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Basta aggiungere il <div>tag all'interno <td>o <th>definire la larghezza all'interno <div>. Questo ti aiuterà. Nient'altro funziona.

per esempio.

<td><div style="width: 50px" >...............</div></td>

Se hai bisogno di una o più colonne a larghezza fissa mentre altre colonne devono ridimensionare, prova a impostare entrambi min-widthe max-widthallo stesso valore.

Devi scrivere questo nel CSS corrispondente

table-layout:fixed;

Quello che faccio è:

1. Imposta la larghezza td:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. Imposta la larghezza td con CSS:

   <td style="width:200px; height:50px;">

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

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

Sembra un po 'ripetitivo ma mi dà il risultato desiderato. Per raggiungere questo obiettivo con molta facilità, potrebbe essere necessario inserire i valori CSS in una classe nel 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:

<td class="td_size">

Posiziona l'attributo class su quello <td>che desideri.

Ho usato questo

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

Se non si desidera un layout fisso, specificare una classe per la dimensione della colonna in modo appropriato.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

Inoltre, aiuta a inserire l'ultima "cella di riempimento", con larghezza: auto . Questo occuperà lo spazio rimanente e lascerà tutte le altre dimensioni come specificato.

Fai in modo che la risposta accettata risponda per schermi di dimensioni ridotte se inferiore alla larghezza fissa.

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

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/

Impostando questo:

style="min-width:100px;" 

Ha funzionato per me.

KAsun ha l'idea giusta. Ecco il codice corretto ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

Secondo la mia risposta qui , è anche possibile utilizzare una testata da tavolo (che può essere vuota) e applicare larghezze relative per ogni cella di testata da tavolo. Le larghezze di tutte le celle nel corpo della tabella saranno conformi alla larghezza della testa della colonna. Esempio:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Visualizza risultato

In alternativa, utilizzare colgroupcome suggerito nella risposta di Hyathin.

Uso un elemento :: after nella cella in cui desidero impostare una larghezza minima indipendentemente dal testo presente, in questo modo:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

Non devo impostare la larghezza sul genitore della tabella né utilizzare il layout della tabella.

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

<td><div style="width: 10vw" >...............</div></td>

Questo era l'unico stile che mi serviva per regolare la larghezza della colonna

Non è necessario impostare "fixed"- tutto ciò che serve è l'impostazione overflow:hiddenpoiché la larghezza della colonna è impostata.