J'ai des tableaux sur ma page Web définis sur width:100%. Cela étend le tableau sur toute la largeur de ma page si nécessaire, ou fait que le contenu du tableau est enveloppé si la page est trop étroite. Tout dans le tableau est conservé dans une grille.

Malheureusement, certains problèmes surviennent s'il y a de longs mots dans le tableau, ce qui empêche le td de devenir plus étroit. Lorsque cela se produit, la page commence à développer une barre de défilement horizontale pour accueillir le tableau, mettre d'autres éléments sur la page, tels que des paragraphes, conserver la largeur de la page d'origine.

J'ai essayé de définir le tableau sur overflow:scroll pour empêcher la page Web de s'élargir, en la limitant uniquement au tableau, mais cela n'a pas résolu le problème. J'ai même essayé overflow:hidden pour voir s'il répondrait, mais je n'ai pas pu le faire fonctionner.

Le débordement fonctionnerait si je définissais le tableau sur display:block, mais je ne peux pas faire en sorte que les lignes du tableau et les cellules de données du tableau s'étendent sur tout le tableau et conservent son apparence de tableau.

Est-il possible de toujours avoir un tableau à 100% de la largeur d'une page, et d'utiliser le défilement de débordement si le tableau dépasse cette largeur?

J'ai ajouté cet exemple ci-dessous. Cela fonctionne bien sauf lorsque la page devient très étroite, comme environ 150 pixels pour cet exemple. Les cellules du tableau deviennent si étroites qu'elles ne peuvent plus s'enrouler. J'aimerais que le tableau déborde, mais à la place, toute la page déborde.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra. Fusce sit amet nisi sed ante semper porta non in velit. Aenean euismod finibus nibh id mollis. Duis finibus, urna eu gravida posuere, nisl tortor condimentum dui, sed suscipit ante lacus et augue. Vestibulum ut leo hendrerit, convallis lectus quis, mollis purus. Mauris vitae libero aliquam, porttitor nisi vitae, pellentesque odio. Mauris vestibulum lacinia sem. Aenean sit amet nulla ipsum. Mauris pellentesque dui feugiat odio feugiat, vel egestas eros pellentesque. Cras porttitor metus eu porttitor lacinia.</p>
<table style="width:100%;overflow:scroll;background:#555">
<tr><td>column one</td><td>column two</td><td>column three</td></tr>
</table>
0
GFL 31 août 2020 à 10:22

2 réponses

Meilleure réponse

Vous ne pouvez pas le faire en changeant display seul pour la table, mais il existe plusieurs façons d'y parvenir.

1. Ajouter un conteneur div "défilant"

Vous pouvez monter la table standard dans un conteneur div et lui donner le overflow: auto;, donc il aura la barre de défilement.

table          { width: 100%; }
.scrollwrapper { overflow: auto; }

Cela signifie que le tableau s'étendra à au moins 100% de la largeur même s'il n'est pas assez large seul, et si le contenu le rend plus large que 100%, le div obtient une barre de défilement.

Exemple de travail:

table {
  width: 100%;
  border: 1px solid blue;
}

.scrollwrapper {
  overflow: auto;
}

td {
  border: 1px solid #aaa;
}
<h3>Scrolling Wrapper - Wide Table</h3>

<div class="scrollwrapper">
  <table>
    <tr>
      <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
      <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
      <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
    </tr>
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    </tr>
  </table>
</div>

<h3>Scrolling Wrapper - Narrow Table</h3>

<div class="scrollwrapper">
  <table>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
    </tr>
    <tr>
      <td>Short text</td>
      <td>Short text</td>
      <td>Short text</td>
    </tr>
  </table>
</div>

2. Tableau avec affichage: bloc

Cela ne fait pas ce que vous voulez, mais voyons pourquoi ...

Lorsque vous attribuez la propriété table display:block, elle ajoute la barre de défilement aux tables si elles sont plus larges que l'espace disponible, ce que vous voulez. Cependant, comme vous l'avez noté, si le tableau n'est pas aussi large que l'espace disponible, width:100% ne fait pas étirer les colonnes pour remplir la largeur:

Exemple fonctionnel d'affichage: bloc sur les tables

table {
  width: 100%;
  border: 1px solid red;
  overflow: auto;
  display: block;
}

td {
  border: 1px solid #aaa;
}
<h3>Display:Block - Wide Table</h3>

<table>
  <tr>
    <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
    <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
    <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
  </tr>
</table>

<h3>Display:Block - Narrow Table</h3>

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Short text</td>
    <td>Short text</td>
    <td>Short text</td>
  </tr>
</table>

Comme nous pouvons le voir dans l'exemple ci-dessus, le tableau s'étire en fait à 100%, car la ligne et les cellules du tableau ne remplissent pas le tableau. C'est là que j'ai découvert le hack tbody ...

3. Table avec affichage: bloquer et tbody "hack"

Notez que c'est vraiment un hack et que je n'ai aucune idée de sa compatibilité!

En jouant avec cela, je me suis rendu compte que le problème est que les lignes et les cellules n'agissent pas comme des lignes et des cellules normales car elles ne sont pas dans un parent avec display:table.

C'est alors que j'ai découvert que lorsque j'ai ajouté display:table au tbody, cela donnait aux lignes et aux cellules un parent avec le type d'affichage correct et cela a fonctionné!

table       { display: block; overflow: auto; }
table tbody { display: table; width: 100%; }

Cela semble fonctionner même lorsque tbody n'est pas explicitement ajouté dans le html.

Exemple fonctionnel de tbody hack

table {
  border: 1px solid blue;
  overflow: auto;
  display: block;
}

table tbody {
  display: table;
  width: 100%;
}

td {
  border: 1px solid #aaa;
}
<h3>Tbody "Hack" - Wide Table</h3>

<table>
  <tr>
    <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
    <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
    <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
  </tr>
</table>

<h3>Tbody "Hack" - Narrow Table</h3>

<table class="tbody-hack">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Short text</td>
    <td>Short text</td>
    <td>Short text</td>
  </tr>
</table>
1
FluffyKitten 3 sept. 2020 à 01:50

Cela fonctionnerait-il? Le débordement apparaîtra si la largeur du tableau est supérieure à la largeur du <div>

<div id="table" style="width:200px">

  <table style="width:100%; overflow:auto;display:block">
    <tr>
      <th>header</th>
      <th>header</th>
      <th>header</th>
      <th>header</th>
      <th>header</th>
      <th>header</th>
    </tr>

    <tr>
      <td>body</td>
      <td>body</td>
      <td>body</td>
      <td>body</td>
      <td>body</td>
      <td>body</td>
    </tr>

  </table>

</div>
0
Hisham Bawa 31 août 2020 à 07:56