2010-01-20 3 views
1

J'ai un tableau HTML, où chaque cellule contient une grande quantité de données. Je voudrais que chaque cellule soit défilable individuellement (sorte de "panneaux"), j'ai donc créé une classe CSS qui inclut l'attribut overflow: scroll. Cependant, la largeur n'est pas la même à chaque fois que j'utilise la classe CSS. Cela provoque un problème de remplissage de cellule. Lorsque la largeur est définie dans la feuille de style externe (ce qui ne fonctionne pas pour moi, puisque je dois pouvoir définir des largeurs différentes), le "volet" remplit la cellule entière, mais quand je la définis au niveau de la cellule, il y a du rembourrage autour de la "vitre", à l'intérieur de la cellule.Cellule HTML contenant des barres de défilement css - comment puis-je me débarrasser du rembourrage?

Voici la définition de classe:

.imitationPane{ 
    display: block; 
    border-width: 1px; 
    border-style: solid; 
    border-color: 000; 
    margin-top: 5px; 
    padding:5px; 
    height: 200px; 
    overflow: scroll 
} 

Voici le code HTML:

<table cellpadding=0 cellspacing=2 border=1 width=720> 
    <tr> 
     <td align=left> 
      <span class="imitationPane"> 
    Hello World bjkgkgdtfdfhbvufgfckjgetdkhgytffkgughkhyufrdyufukg<br><br><br> 
      </span> 
     </td> 
     <td align=left> 
      <span class="imitationPane"> 
    Hello World bjkgkgdtfdfhbvufgfckjgetdkhgytffkgughkhyufrdyufukg<br><br><br> 
<h1>AGAIN</h1> 
      </span> 
     </td> 
    </tr> 
    <tr> 
     <td align=left> 
      <span class="imitationPane"> 
    Hello World bjkgkgdtfdfhbvufgfckjgetdkhgytffkgughkhyufrdyufukg<br><br><br> 
<h1>CELL 3</h1> 
      </span> 
     </td> 
     <td align=left> 
      <span class="imitationPane"> 
    Hello World bjkgkgdtfdfhbvufgfckjgetdkhgytffkgughkhyufrdyufukg<br><br><br> 
<h1>CELL 4</h1> 
      </span> 
     </td> 
    </tr> 
</table> 

Répondre

1

Je résolu ce problème une minute après la publication, même si je travaillais à elle pendant un certain nombre d'heures . Le problème réel était que lorsque la largeur de la table était plus grande que la somme des largeurs de chaque cellule individuelle (ou de sa zone), le remplissage de la cellule est apparu. Par coïncidence, j'avais seulement essayé de plus grands nombres dans la feuille de style externe, et les petits dans le code réel, donc il est apparu que le problème était causé par où les données étaient, pas ce que les données étaient

0

Ok, pour ajouter quelque chose pour cela, en regardant rapidement, il peut être plus logique d'appliquer la propriété scroll à la table td au lieu des balises span. Logiquement, lorsque le contenu de la cellule dépasse ses dimensions données, il déborde, et vous demandez que le débordement soit affiché comme défilement .... les attributs que vous définissez dans votre CSS semblent plus adaptés aux éléments de la table plutôt qu'à l'étendue .... mais bien sûr, vous connaissez mieux vos besoins.

+0

J'ai d'abord essayé cette option, mais elle oblige chaque cellule à apparaître sur sa propre ligne sur l'écran. Je n'arrive pas à comprendre comment faire apparaître les cellules côte à côte (jusqu'à ce que je précise qu'une nouvelle ligne a réellement commencé), même si j'ai essayé d'élargir la largeur de la table pour m'assurer qu'il y avait assez de place pour tout. Savez-vous pourquoi cela se passe? – twpc

Questions connexes