Comment définir l'attribut width de la cellule td du tableau tr en HTML

La largeur du tableau est adaptative et certains TD ont une largeur fixe. En principe, la largeur du tableau doit être définie sur une valeur fixe, plutôt que sur une valeur qui change en fonction de l'écran. Voyons maintenant comment définir la largeur des cellules td du tableau.

Exemple 1 : La largeur du tableau est de 600 px, et la somme de toutes les largeurs du td du tableau est inférieure à 600 px. Le navigateur calculera automatiquement la largeur en fonction du rapport. de la largeur de td

<table style="width: 600px;border-collapse: collapse;" >
            <tr>
               <td style="width: 200px;">我是200px</td>
               <td style="width: 200px;">我也是200px</td>
            </tr>
</table>
运行结果：两个td都是300px;

La largeur du Tableau est de 600px La largeur des deux premiers TD est déjà de 600px, donc la largeur du troisième TD n'est pas précisée. le troisième TD est basé sur le contenu, puis la largeur des deux premiers TD est basée sur la largeur de calcul de la colonne de rapport.

Exemple 2 : Les deux premiers tds sont plus petits que la largeur du tableau, puis le dernier td joue un rôle de complétion

<table style="width: 600px;border-collapse: collapse;" >
            <tr>
                <td style="width: 300px;">我是200px</td>
                <td style="width: 300px;">我也是200px</td>
                <td >我是根据内容的</td>
            </tr>
</table>

Exemple 3 : Au sein du td du Tableau, si l'élément block est placé plus que La largeur du td et la disposition du tableau : fixe (fixe signifie que la largeur du td est fixe et ne change pas avec le changement du contenu du td). De cette façon, essayez de ne pas écrire overflow: auto; dans td car les barres de défilement n'apparaîtront pas dans IE6 et 7. La meilleure façon est d'envelopper un div avec une largeur définie sur 100%

<table style="width: 600px;border-collapse: collapse;table-layout: fixed;" >
            <tr>
                <td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td>
               <td >我是自由宽度</td>
            </tr>
        </table>

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!