Largeur de la Table HTML en pourcentage, lignes de la table séparées également
Lorsque je crée une table en html, une table avec une largeur de 100%, Si je veux que toutes les cellules (tds) soient divisées en parties égales, dois-je entrer la largeur % pour chaque cellule? Je suis "obligée" de le faire?
Par exemple:
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
</table>
Ou ce qui suit pourrait également être la bonne procédure, ne pas écrire la largeur dans chaque tds si je veux que chacun d'eux soit divisé également:
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Je sais que cela fonctionne avec les deux manières, mais je veux juste connaître la façon "légitime" de le faire.
5 réponses
Vous devez entrer la largeur % pour chaque cellule. Mais attendez, il y a une meilleure façon de le faire, ça s'appelle CSS:
<style>
.equalDivide tr td { width:25%; }
</style>
<table class="equalDivide" cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Utilisez la propriété table-layout:fixed; sur la table pour obtenir des cellules également espacées. Si une colonne a une largeur définie, quel que soit le contenu, il sera la largeur spécifiée. Les colonnes sans jeu de largeur diviseront la pièce restante entre elles.
<table style='table-layout:fixed;'>
<tbody>
<tr>
<td>gobble de gook</td>
<td>mibs</td>
</tr>
</tbody>
</table>
Juste pour le lancer, vous pouvez également utiliser <colgroup><col span='#' style='width:#%;'/></colgroup>, qui ne nécessite pas de répétition de style par données de table ou de donner à la table un identifiant à utiliser dans une feuille de style. Je pense que définir les largeurs sur la première rangée est suffisant bien.
Oui, vous devrez spécifier la largeur de chaque cellule, sinon ils essaieront d'être" intelligents " à ce sujet et de diviser le 100% entre les cellules qui pensent en avoir le plus besoin. Les cellules avec plus de contenu prendront plus de largeur que celles avec moins.
Pour vous assurer d'obtenir une largeur égale pour chaque cellule, vous devez le préciser. Soit faites-le comme vous l'avez déjà fait, soit utilisez CSS.
table.className td { width: 25%; }
Vous pouvez essayer ceci, je le ferais avec CSS, mais je pense que vous le voulez avec des tables sans CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body leftmargin=0 rightmargin=0>
<table cellpadding="0" cellspacing="0" width="100%" border="1" height="350px">
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
</table>
</body>
</html>
C'est certainement la réponse la plus propre à la question: https://stackoverflow.com/a/14025331/1008519 .
En combinaison avec table-layout: fixed je trouve souvent <colgroup> un excellent outil pour faire des colonnes d'agir comme vous le souhaitez (voir codepen ici):
table {
/* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */
table-layout: fixed;
}
.fixed-width {
width: 100px;
}
.col-12 {
width: 100%;
}
.col-11 {
width: 91.666666667%;
}
.col-10 {
width: 83.333333333%;
}
.col-9 {
width: 75%;
}
.col-8 {
width: 66.666666667%;
}
.col-7 {
width: 58.333333333%;
}
.col-6 {
width: 50%;
}
.col-5 {
width: 41.666666667%;
}
.col-4 {
width: 33.333333333%;
}
.col-3 {
width: 25%;
}
.col-2 {
width: 16.666666667%;
}
.col-1 {
width: 8.3333333333%;
}
/* Stylistic improvements from here */
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
table {
width: 100%;
}
table > tbody > tr > td,
table > thead > tr > th {
padding: 8px;
border: 1px solid gray;
}<table cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col /> <!-- take up rest of the space -->
<col class="fixed-width" /> <!-- fixed width -->
<col class="col-3" /> <!-- percentage width -->
<col /> <!-- take up rest of the space -->
</colgroup>
<thead>
<tr>
<th class="align-left">Title</th>
<th class="align-right">Count</th>
<th class="align-left">Name</th>
<th class="align-left">Single</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
<td class="align-right">19</td>
<td class="align-left">Lisa McArthur</td>
<td class="align-left">No</td>
</tr>
<tr>
<td class="align-left">This is a shorter title</td>
<td class="align-right">2</td>
<td class="align-left">John Oliver Nielson McAllister</td>
<td class="align-left">Yes</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" border="0">
<!-- define everything with percentage width -->
<colgroup>
<col class="col-6" />
<col class="col-1" />
<col class="col-4" />
<col class="col-1" />
</colgroup>
<thead>
<tr>
<th class="align-left">Title</th>
<th class="align-right">Count</th>
<th class="align-left">Name</th>
<th class="align-left">Single</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
<td class="align-right">19</td>
<td class="align-left">Lisa McArthur</td>
<td class="align-left">No</td>
</tr>
<tr>
<td class="align-left">This is a shorter title</td>
<td class="align-right">2</td>
<td class="align-left">John Oliver Nielson McAllister</td>
<td class="align-left">Yes</td>
</tr>
</tbody>
</table>