Table avec 100 % de largeur avec des colonnes de taille égale

Question

Je dois créer dynamiquement une table avec un nombre variable de colonnes, déterminé à l'exécution.

Quelqu'un peut-il me dire s'il est possible d'avoir une table html avec des colonnes de taille égale qui sont complètement étirées ?

Answer 1

Si vous ne savez pas combien de colonnes vous allez avoir, la déclaration

table-layout: fixed

en plus de ne pas définir de largeur de colonne, impliquerait que les navigateurs divisent la largeur totale uniformément - quoi qu'il arrive.

Cela peut également être le problème avec cette approche, si vous utilisez cela, vous devriez également considérer comment le débordement doit être géré.

Answer 2

<table width="400px">
  <tr>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  </tr>
</table>

Pour le nombre variable de colonnes, utilisez %

<table width="100%">
  <tr>
  <td width="(100/x)%"></td>
  </tr>
</table>

où 'x' est le nombre de colonnes

Answer 3

TOUT CE QUE VOUS AVEZ À faire :

HTML :

<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>

CSS :

#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/

si vous avez th vous devez le définir trop comme ceci :

#my-table th{width:2000px;}

Answer 4

Ajoutez simplement style="table-layout: fixed ; width: 100%;" l'intérieur de <table> tag et aussi si vous ne spécifiez pas de styles et ajoutez seulement style=" width: 100%;" l'intérieur de <table> Vous serez en mesure de le résoudre.

Answer 5

table {
    width: 100%;

    th, td {
        width: 1%;
    }
}

Syntaxe SCSS