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>