需要一个 html 表格中的滚动单元格答案

【问题标题】：Need a scrolling cell in an html table需要一个 html 表格中的滚动单元格
【发布时间】：2011-12-13 18:40:37
【问题描述】：

我有一个 html 表格，其中包含一个单元格将包含大量数据（可能是 200 行）。我希望表格中的单元格滚动，而不是要求我的页面滚动。
我知道我需要一个 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;
}

【问题讨论】：

标签： html css scroll html-table

【解决方案1】：

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

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

喜欢

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

和

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

【讨论】：

【解决方案2】：

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

【讨论】：

为什么iframe 是最简单的解决方案？
我想说的是最简单和最糟糕的。

【解决方案3】：

前段时间我回答了这样一个问题，看看答案here和演示here。

编辑

在这里发布代码以供其他海报将来参考：

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

【讨论】：