html même Comment faire un tableau avec des largeurs de colonne égales en CSS?




tableau css (3)

J'ai eu le même problème dans l'un de mes projets, mais il a été résolu lorsque j'ai combiné les deux solutions ci-dessus (Merci à elles). Voici mon extrait de code:

.Table{
    width: 100%;
    table-layout: fixed;
}

J'ai un document contenant un tableau comme celui-ci:

<table>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
</table>

Avec CSS, je dois définir une largeur de 50% pour toutes les cellules, le texte à gauche de la "colonne" étant aligné à droite et le texte de la colonne de gauche étant aligné à gauche. J'ai essayé de nombreuses options différentes, par exemple width: 50%; text-align: left width: 50%; text-align: left , mais les résultats sont toujours inhabituels. Les résultats devraient ressembler à ceci:

 _________________________
|       word | definition |
|____________|____________|
|       word | definition |
|____________|____________|
  • Je ne peux pas ajuster le code réel de la table directement. Je ne peux que modifier le style CSS.
  • La réponse dans Créer des colonnes de largeur égale dans <table> ne convient pas, car je ne connais pas la largeur de la page et cette largeur peut varier.

Comment définir des cellules de même largeur dans un tableau à deux colonnes en CSS avec tout ce qui est aligné au milieu?


La table devrait avoir la propriété width: 100% . Voir exemple ici

table{
    width: 100%;
    border-collapse:collapse;
}

td{
    width: 50%;
    text-align: left;
    border: 1px solid black;
}

À propos de l'alignement du texte, vous avez dit deux choses différentes:

Avec CSS, je dois définir une largeur de 50% pour toutes les cellules, le texte à gauche de la "colonne" étant aligné à droite et le texte de la colonne de gauche étant aligné à gauche.

et alors

Comment définir des cellules de même largeur dans un tableau à deux colonnes en CSS avec tout ce qui est aligné au milieu?

Si le premier correspond à vos souhaits et que vous ne pouvez pas modifier votre code HTML, vous pouvez utiliser td:first-child pour styler différemment votre première colonne.

Si la seconde est votre meilleure option, modifiez simplement la valeur text-align en center .


Vous pouvez définir la disposition de la table-layout: fixed; sur votre table. Vous pouvez ainsi utiliser le redimensionnement automatique des colonnes du navigateur. Ensuite, votre navigateur définit la largeur de la première colonne sur tous.





html-table