web-dev-qa-db-fra.com

débordement: faire défiler; dans <td>

Pourquoi la propriété CSS overflow:scroll; ne fonctionne pas dans <td>, tandis que overflow:hidden; fonctionne bien?

<table border="1" style="table-layout:fixed; width:100px">
  <tr>
    <td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

À partir des spécifications CSS1 , 2, Je ne vois pas pourquoi.

htmlcssscrollhtml-tablecss-tables
23
an0

J'ai quelque chose d'ici !

Andrew Fedoniouk a écrit:

C'est en fait ma question: "Une raison technique est que la propriété overflow ne s'applique pas aux tables." - Pourquoi? Quelle est cette raison?

Je ne suis pas un expert, mais je pense que c'est juste pour la compatibilité descendante avec le comportement des tables héritées. Vous pouvez vérifier l'algorithme de mise en page de table "automatique" dans la spécification. Je suis à peu près sûr que cet algorithme de mise en page est incompatible avec la propriété de débordement (ou, plus précisément, l'algorithme de mise en page n'entraînera jamais le besoin d'une valeur de débordement sauf "visible").

Oui, c'est pourquoi je demande. Il semble qu'il n'y ait pas de raisons formelles pour lesquelles ou ne devrait pas être scrollable, mais il semble que les fournisseurs d'UA aient conclu un accord silencieux dans ce domaine. Telle est la question.

La spécification est d'accord avec vous en ce qui concerne les éléments. Les cellules du tableau sont censées respecter le débordement, bien que Mozilla, au moins, ne semble pas le faire. Je ne peux pas répondre à votre question dans ce cas, même si je suppose que la réponse est toujours liée au rendu hérité.

Le le fil principal est ici .

6
Kirtan

Vous devez l'envelopper dans un div, cela fonctionnera:

<table border="1" style="table-layout:fixed; width:500px">
  <tr>
    <td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>
29
Tim Büthe

Fournissez d'abord la hauteur désirée à td, puis appliquez la propriété "float: left" à la propriété "td" respective que vous voulez voir apparaître.

11
user1885649
<table border="1" style="table-layout:fixed; width:500px">
  <tr>
    <td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>
3
DrWerenverlivitz