views:

58

answers:

2

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>
+1  A: 

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

twpc
A: 

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.

Tom
I actually tried this option first, but it forces each cell to appear on its own line on the screen. I cannot figure out how to get the cells to appear side-by-side (until I specify that a new row has actually begun), even though I tried expanding the table width to make sure there was enough room for everything. Do you know why this is happening?
twpc