Célula html contendo barras de rolagem CSS - como posso me livrar do preenchimento?

Question

Eu tenho uma tabela HTML, onde cada célula contém uma grande quantidade de dados. Eu gostaria que cada célula fosse rolável individualmente (como "painéis"), então criei uma classe CSS que inclui o atributo Overflow: Scroll. No entanto, a largura não é a mesma para cada vez que emprego a classe CSS. Isso está causando um problema de preenchimento de células. Quando a largura é definida na folha de estilo externo (que não funciona para mim, pois preciso ser capaz de definir diferentes larguras), o "painel" enche toda a célula, mas quando eu a defino no nível da célula, Há estofamento ao redor do "painel", dentro da célula.

Aqui está a definição de classe:

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

Aqui está o código 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>

Answer 1

Eu resolvi isso um minutos após a postagem, embora eu estivesse trabalhando por várias horas. A questão real era que, quando a largura da tabela era maior que a soma das larguras de cada célula individual (ou área abrangente), o preenchimento de células apareceu. Por coincidência, eu só havia tentado números maiores na folha de estilo externo e pequenos dentro do código real, portanto, parecia que o problema foi causado por onde os dados estavam, não o que os dados eram

Answer 2

Ok, para adicionar algo a isso, com uma aparência rápida, pode fazer mais sentido aplicar a propriedade Scroll à tabela TDs em vez das tags de extensão. Logicamente então, quando o conteúdo da célula excede suas dimensões, ela transborda e você solicita que o estouro seja mostrado como rolagem ... os atributos que você está definindo em seu CSS parecem mais adequados aos elementos da tabela, em vez de span .... Mas é claro que você conhece as suas necessidades melhores.