Tabel met 100% breedte met kolommen van gelijke grootte

Ik moet dynamisch een tabel maken met een variabel aantal kolommen, bepaald tijdens runtime.

Kan iemand mij vertellen of het mogelijk is om een ​​HTML-tabel te hebben met kolommen van gelijke grootte die volledig zijn uitgerekt?


Antwoord 1, autoriteit 100%

Als u niet weet hoeveel kolommen u gaat hebben, de verklaring

table-layout: fixed

samen met geenkolombreedten instellen,
zou impliceren dat browsers de totale breedte gelijk verdelen – wat er ook gebeurt.

Dat kan ook het probleem zijn met deze aanpak, als je dit gebruikt, moet je ook overwegen hoe overloop moet worden afgehandeld.


Antwoord 2, autoriteit 31%

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

Voor een variabel aantal kolommen gebruik %

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

waarbij ‘x’ het aantal kolommen is


Antwoord 3, autoriteit 4%

ALLES WAT U MOET DOEN:

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

als je thhebt, moet je deze ook als volgt instellen:

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

Antwoord 4, autoriteit 2%

Voeg gewoon style="table-layout: fixed ; width: 100%;"toe in de <table>-tag en ook als u geen stijlen en voeg gewoon style=" width: 100%;"toe aan <table>U kunt het oplossen.


Antwoord 5, autoriteit 2%

table {
    width: 100%;
    th, td {
        width: 1%;
    }
}

SCSS-syntaxis

Other episodes