Нужна прокрутка ячейки в таблице HTML

Question

У меня есть HTML-таблица, которая содержит ячейку будет много данных (возможно, 200 строк). Вместо того чтобы требовать прокрутки моей страницы, я хочу, чтобы прокручивалась моя ячейка в таблице.
Я понимаю, что для этого мне нужен блок div. Я определил блок div в моем Файл CSS, но он не принимает.

Как мне зафиксировать высоту моей ячейки и дать моим данным полосу прокрутки?

-------- html таблица -----------

<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

Я ответил на такой вопрос некоторое время назад, взгляните на ответ здесь и демоверсию здесь .

РЕДАКТИРОВАТЬ

Публикация кода здесь для использования в будущем для других плакатов:

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>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</tbody>
</table>

CSS

.inner-table {
    width:100px;
    overflow-x:scroll;
}

th {
    height:20px;
}

Если вы хотите, чтобы вертикальные и горизонтальные полосы прокрутки отображались, просто замените overflow-x:scroll; на overflow:scroll для .inner-table класса.

Answer 2

присваивает этому тд абсолютную высоту и 100% ширину / высоту для div

<td rowspan="2" valign="top" > 

, как

<td rowspan="2" valign="top" style="height:100px;">

и

#scrollcell {
    width: 100%;
    height: 100%;
    overflow: auto;
}

Answer 3

Самым простым решением было бы поместить стол в iframe.В противном случае вы можете использовать либо JavaScript, либо overflow.