Comment définir la largeur du tableau (tableau) en CSS

Dans la conception de mises en page Web, les tableaux sont souvent utilisés pour organiser les données. Lors de l'utilisation de tableaux, afin de garantir la beauté et la lisibilité de la page, nous devons définir la largeur du tableau. Ce qui suit explique comment utiliser CSS pour définir la largeur d'un tableau (tableau).

1. Utilisez l'attribut width en CSS

Il existe un attribut width en CSS qui peut être utilisé pour définir la largeur d'un élément. Dans le tableau, nous pouvons également utiliser cette propriété pour définir la largeur du tableau. La méthode spécifique est la suivante :

1. Dans la feuille de style CSS, utilisez le sélecteur "table" pour sélectionner l'élément du tableau ;
2. Utilisez l'attribut width pour spécifier une valeur de largeur (peut être des pixels ou un pourcentage) pour le tableau.

Par exemple, le code suivant définit la largeur du tableau à 400 pixels :

<table style="width: 400px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

Dans le code ci-dessus, nous définissons l'attribut "width" de l'élément du tableau à "400px" afin que la largeur de l'ensemble du tableau est limité à 400 pixels. Même si le contenu du tableau dépasse 400 pixels, le tableau ne sera pas étiré et des barres de défilement seront affichées.

Si nous définissons l'attribut width sur une valeur en pourcentage, alors la largeur du tableau sera proportionnelle à la largeur de l'élément parent. Par exemple, le code suivant définit la largeur du tableau à 50% de la largeur de l'élément parent :

<div>
  <table style="width: 50%;">
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </table>
</div>

Dans le code ci-dessus, nous définissons l'attribut "width" de l'élément tableau à "50%" afin que l'élément la largeur du tableau s'y adaptera automatiquement. La largeur de l'élément parent a un meilleur effet de conception réactive.

2. Utilisez l'attribut min-width et l'attribut max-width en CSS

En plus d'utiliser l'attribut width pour définir la largeur du tableau, nous pouvons également utiliser l'attribut min-width et l'attribut max-width en CSS pour définir la largeur minimale du tableau et la largeur maximale. L'utilisation de ces propriétés est similaire à la propriété width, il vous suffit de modifier le nom de la propriété en conséquence.

Par exemple, nous pouvons définir une valeur de largeur minimale pour le tableau afin d'éviter que le tableau ne soit trop petit et n'affecte la mise en page. Voici un exemple :

<table style="min-width: 200px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

Dans le code ci-dessus, nous définissons l'attribut "min-width" de l'élément table à "200px" afin que la largeur du tableau ne soit pas inférieure à 200px même s'il y a peu de contenu dans le tableau.

De même, nous pouvons également définir une valeur de largeur maximale pour le tableau afin d'éviter que le tableau ne soit trop grand et n'affecte la mise en page. Voici un exemple :

<table style="max-width: 800px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

Dans le code ci-dessus, nous définissons l'attribut "max-width" de l'élément table sur "800px", de sorte que même s'il y a beaucoup de contenu dans le tableau, la largeur du tableau ne dépassera pas 800 pixels.

Résumé :

Il existe plusieurs façons ci-dessus de définir la largeur d'un tableau (tableau) à l'aide de CSS. Dans les applications de sites Web réelles, nous devons choisir la méthode de réglage de la largeur appropriée en fonction de la situation réelle pour obtenir le meilleur effet de page.

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!