Définition de la td
hauteur inférieure à la hauteur naturelle de son contenu
Étant donné que les cellules de tableau veulent être au moins suffisamment grandes pour encapsuler leur contenu, si le contenu n'a pas de hauteur apparente, les cellules peuvent être redimensionnées arbitrairement.
En redimensionnant les cellules, nous pouvons contrôler la hauteur de la ligne.
Une façon de faire cela consiste à définir le contenu avec une absolute
position dans la relative
cellule et à définir le height
de la cellule, et le left
et top
du contenu.
table {
width: 100%;
}
td {
border: 1px solid #999;
}
.set-height td {
position: relative;
overflow: hidden;
height: 3em;
}
.set-height p {
position: absolute;
margin: 0;
top: 0;
}
/* table layout fixed */
.layout-fixed {
table-layout: fixed;
}
/* td width */
.td-width td:first-child {
width: 33%;
}
<table><tbody>
<tr class="set-height">
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
<td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</tbody></table>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><tbody>
<tr class="set-height">
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
<td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</tbody></table>
<h3>With <code><td> width</code> applied:</h3>
<table class="td-width"><tbody>
<tr class="set-height">
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
<td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</tbody></table>
La table-layout
propriété
Le deuxième tableau de l'extrait de code ci-dessus a été table-layout: fixed
appliqué, ce qui donne aux cellules une largeur égale, quel que soit leur contenu, dans le parent.
Selon caniuse.com , il n'y a pas de problèmes de compatibilité importants concernant l'utilisation du table-layout
12 septembre 2019.
Ou appliquez simplement width
à des cellules spécifiques comme dans le troisième tableau.
Ces méthodes permettent à la cellule contenant le contenu réellement sans taille créée par l'application position: absolute
de recevoir une circonférence arbitraire.
Beaucoup plus simplement ...
J'aurais vraiment dû y penser dès le début; nous pouvons manipuler le contenu des cellules du tableau au niveau bloc de toutes les manières habituelles, et sans détruire complètement la taille naturelle du contenu avec position: absolute
, nous pouvons quitter le tableau pour déterminer quelle devrait être la largeur.
table {
width: 100%;
}
td {
border: 1px solid #999;
}
table p {
margin: 0;
}
.cap-height p {
max-height: 3em;
overflow: hidden;
}
<table><tbody>
<tr class="cap-height">
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
<td>Foo</td>
</tr>
<tr class="cap-height">
<td><p>Bar</p></td>
<td>Baz</td>
</tr>
<tr>
<td>Qux</td>
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
</tr>
</tbody></table>