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

Question

Nel mio tavolo ho impostato la larghezza della prima cella in una colonna per essere 100px.
Tuttavia, quando il testo in una delle celle in questa colonna è troppo lungo, la larghezza della colonna diventa più di 100px. Come avrei potuto disattivare questa espansione?

Answer 1

I giocato con lui per un po 'perché ho avuto difficoltà a capire che fuori.

È necessario impostare la larghezza della cella (o th o td lavorato, ho impostato entrambi) e impostare il table-layout a fixed. Per qualche ragione, la cellula di larghezza sembra rimanere fisso solo se la tabella larghezza è impostata, anche (credo che sia sciocco, ma whatev).

Inoltre, è utile per impostare la proprietà overflow per hidden per evitare qualsiasi testo in più da che esce dal tavolo.

Si dovrebbe fare in modo di lasciare tutto il confine e dimensionamento per i CSS, anche.

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>

Qui è in JSFiddle

Questo ragazzo ha avuto un problema simile: larghezza cella di una tabella - fissare larghezza, avvolgimento / troncare le parole lunghe

Answer 2

Vedere: http://www.html5-tutorials.org/tables/changing-column- larghezza /

Dopo il tag table, utilizzare l'elemento col. non hai bisogno di un tag di chiusura.

Ad esempio, se si aveva tre colonne:

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

Answer 3

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

ad es.

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

Answer 4

Se avete bisogno di una o più colonne di larghezza fissa, mentre altre colonne devono ridimensionare, provare a impostare sia min-width e max-width allo stesso valore.

Answer 5

Hai bisogno di scrivere questo all'interno il corrispondente CSS

table-layout:fixed;

Answer 6

Quello che faccio è:

1. Imposta la larghezza td:

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

2. Impostare la larghezza td con i CSS:

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

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

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

Sembra 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*/   
}

quindi:

<td class="td_size">

Posizionare l'attributo di classe a qualsiasi <td> che si desidera.

Answer 7

ho usato questo

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

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

Answer 8

Inoltre aiuta, per mettere l'ultimo "cellule filler", con width: auto . Questo occuperà spazio rimanente, e lascerà tutte le altre dimensioni come specificato.

Answer 9

Se non si desidera un layout fisso, specificare una classe per la colonna di essere formato in modo appropriato.

CSS:

.special_column { width: 120px; }

HTML:

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

Answer 10

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>

Answer 11

Fare rispondono risposta accettata per piccoli schermi, quando più piccole rispetto 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/

Answer 12

Come per la mia risposta qui , è anche possibile utilizzare un head tabella (che può essere vuoto) e applicare larghezze relative per ogni cella testa tavolo. Le larghezze di tutte le celle del corpo della tabella si conformeranno 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;
}

View Risultato

In alternativa, l'uso colgroup come suggerito nella risposta di Hyathin.

Answer 13

L'impostazione di questo:

style="min-width:100px;" 

ha lavorato per me.

Answer 14

Ho trovato la risposta di Kasun funziona meglio utilizzando vw al posto di px in questo modo:

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

Questo è stato l'unico styling avevo bisogno di regolare la larghezza della colonna

Answer 15

Non c'è bisogno di "fixed" set -. Tutto ciò che serve è l'impostazione overflow:hidden dal momento che la colonna di larghezza è impostato