Comment puis-je conserver des largeurs de cellules fixes dans les tableaux HTML ?

Maintenir une largeur de cellule de tableau fixe

Les tableaux continuent d'être une méthode de mise en page courante, ce qui soulève des questions sur le contrôle de la largeur des cellules. Le style de cellule traditionnel utilisant les attributs de largeur échoue souvent, car l'expansion du contenu de la cellule remplace la largeur spécifiée.

Comment jqGrid atteint des largeurs de cellule fixes

jqGrid utilise une combinaison d'éléments :

• Balise : Cette balise définit les caractéristiques des colonnes du tableau. jqGrid définit l'attribut width dans pour spécifier la largeur de colonne souhaitée.
• table-layout: fixed Style: Appliqué au tableau, ce style verrouille les largeurs de colonnes quel que soit le contenu des cellules.
• débordement : style masqué sur les cellules du tableau : Ce style empêche le contenu des cellules de déborder au-delà de la valeur spécifiée width.

Implémentation de largeurs de cellules fixes

Pour implémenter des largeurs de cellules fixes dans vos propres tableaux :

1. Incluez le < col> balisez et spécifiez la largeur souhaitée pour chaque colonne.
2. Appliquez le style table-layout: fixe au tableau à l'aide de CSS.
3. Définissez le débordement: style caché sur des cellules individuelles du tableau.

Exemple Code

HTML :

<table>
    <col width="20px">
    <col width="30px">
    <col width="40px">
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

CSS :

table { table-layout: fixed; }
table td { overflow: hidden; }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!