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>
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