Question

I have an HTML table, where each cell contains a large amount of data. I would like each cell to be individually scrollable (sort of like "panes"), so I created a CSS class that includes the overflow:scroll attribute. However, the width is not the same for each time that I employ the CSS class. This is causing a cell padding issue. When the width is defined in the external style sheet (which does not work for me, since I need to be able to set different widths), the "pane" fills the entire cell, but when I define it at the cell-level, there is padding around the "pane", within the cell.

Here is the class definition:

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

Here is the HTML code:

<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>
Was it helpful?

Solution

I solved this one minutes after posting, although I had been working at it for a number of hours. The actual issue was that when the table width was bigger than the sum of the widths of each individual cell (or spanned area), the cell padding appeared. Coincidentally, I had only tried larger numbers in the external style sheet, and small ones within the actual code, therefore it appeared that the problem was caused by where the data was, not WHAT the data was

OTHER TIPS

Ok, to add something to that, on quick look it might make more sense to apply the scroll property to the table td's instead of the span tags. Logically then, when the content of the cell exceeds its given dimensions, it overflows, and you request that the overflow is shown as scroll.... the attributes you're defining in your CSS seem more suitable to the table elements rather than span.... but of course you know your needs best.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top