Need a scrolling cell in an html table - html

Question

I have an html table that contains a cell will a lot of data (maybe 200 lines).
Rather than requiring my page to scroll, I want my cell in the table to scroll.
I understand that I need a div block to do this. I defined a div block in my
css file but it is not taking.
How do I fix the height of my cell and give my data a scrollbar?
--------html table-----------
<table class="cmain">
<tr>
<td> TOP LEFT CELL <p>
<table> <tr> <td> A sub-table goes here </td> </tr> </table>
</td>
<td> TOP RIGHT CELL <p>
<p> A PHOTO GOES HERE.
<p> PHOTO: {{ form.image }}
</td>
<td rowspan="2" valign="top" >
THIS IS THE CELL THAT NEEDS THE SCROLL BAR. <div id="scrollcell">
SCROLLER CELL <hr>
<p> {% for customer in customer_list %}
<p> {{ customer }} </p>
{% endfor %}
</div>
</td>
</tr>
<tr>
<td> Another Sub-table goes here.
<table> <tr> <td> A sub-table goes here </td> </tr> </table>
</td>
<td> A NOTES FORM FIELD GOES HERE <p>
{{ form.notes }} </td>
</tr>
</table> <!-- end of CMAIN table -->
--------css -----------
table, th, td {
border: 1px solid white;
}
table.cmain {
border: 1px solid blue;
}
table.cmain td {
border: 1px solid blue;
font-weight: bold;
/*width: 300;*/
padding: 3px;
font-size: 0.8em;
}
#scrollcell {
width: 50px;
height: 50px;
overflow: auto;
}

Answer 1

I answered a question like this a while back, take a look at the answer here and the demo here.
EDIT
Posting code here for future reference for other posters:
HTML
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th colspan="1" rowspan="5" style="border: medium none ; width: 100px; vertical-align: top;">
<div class="inner-table">
<table style="text-align: left; width: 500px; border:none" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
</tr>
</tbody>
</table>
</div>
</th>
<th>Header 4</th>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>c</td>
<td>c</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS
.inner-table {
width:100px;
overflow-x:scroll;
}
th {
height:20px;
}
If you wish to make the vertical and horizontal scrollbars appear just replace overflow-x:scroll; with overflow:scroll for the .inner-table class.

Answer 2

The easiest solution would be to put the table into an iframe. Otherwise you can use either javascript or overflow.

Answer 3

give this td an absolute height and 100% width/height to the div
<td rowspan="2" valign="top" >
like
<td rowspan="2" valign="top" style="height:100px;">
and
#scrollcell {
width: 100%;
height: 100%;
overflow: auto;
}