需要在 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> </td>
        <td> </td>
        <td> </td>
    </tr>
</tbody>
</table>

CSS

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

th {
    height:20px;
}

如果您希望显示垂直和水平滚动条，只需替换对于 .inner-table 类，overflow-x:scroll; 和 overflow:scroll 。

Answer 2

最简单的解决方案是将表格放入 iframe 中。否则，您可以使用 javascript 或 overflow。

Answer 3

给这个 td 一个绝对高度和 100% 宽度/高度给 div

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

就像

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

和

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