web-dev-qa-db-fra.com

HTML Largeur de la table en pourcentage, les lignes de la table sont séparées également

Lorsque je crée une table en html, une table d'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? Suis-je "obligé" 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é de manière égale:

<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.

htmlhtml-table
25
user977191

Vous devez entrer le% de largeur pour chaque cellule. Mais attendez, il y a une meilleure façon de faire ça, ç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>
21
vantrung -cuncon

Utilisez la propriété table-layout:fixed; sur la table pour obtenir des cellules équidistantes. Si une colonne a une largeur définie, quel que soit le contenu, ce sera la largeur spécifiée. Les colonnes non définies en largeur divisent la pièce qui reste entre elles.

<table style='table-layout:fixed;'>
    <tbody>
        <tr>
            <td>gobble de gook</td>
            <td>mibs</td>
        </tr>
    </tbody>
</table>

Pour le jeter, vous pouvez également utiliser <colgroup><col span='#' style='width:#%;'/></colgroup>, qui ne nécessite pas de répéter le style par données de table ni de donner à la table un identifiant à utiliser dans une feuille de style. Je pense que définir les largeurs sur la première ligne est suffisant.

30
Chinoto Vokro

Oui, vous devrez spécifier la largeur de chaque cellule, sinon ils essaieront d'être "intelligents" à ce sujet et diviseront à 100% entre les cellules qui en ont le plus besoin. Les cellules avec plus de contenu occuperont plus de largeur que celles avec moins.

Pour vous assurer d'obtenir une largeur égale pour chaque cellule, vous devez l'indiquer clairement. Faites-le comme vous l'avez déjà fait ou utilisez CSS.

table.className td { width: 25%; }
2
Nick Brunt

vous pouvez essayer ceci, je le ferais avec CSS, mais je pense que vous le voulez avec des tableaux 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%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
         </tr>
      </table> 
   </body>
</html>
2
Racooon

C’est certainement la réponse la plus claire à la question: https://stackoverflow.com/a/14025331/1008519 . En combinaison avec table-layout: fixed, je trouve souvent que <colgroup> est un excellent outil pour que les colonnes fonctionnent 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>

1
mlunoe