Question

我正在尝试制作一个可滚动的表，其中包含动态填充的固定标题。我在这个网站上找到了一个很好的例子但是无法实现它。我在这里创造了一个小提琴：http://jsfiddle.net/nokfw667/6/

通过单击按钮填充表格，并且创建它的javascript已包含在返回的数据示例中。在我的例子中，我硬编了表格。在小提琴的顶部是我从这个网站得到的例子。然后我尝试创建自己的，但也没有用。

表示例：

<Table id="ImageDataTable">
    <thead>
        <tr>
            <th style="width:140px;">Whole Nbr</div>
            <th style="width:90px;">Type</th>
            <th style="width:190px;">Size</th>
            <th style="width:100px;">Revision</th>
            <th style="width:140px;">Other Nbr</th>
            <th style="width:90px;">Sheet Nbr</th>
            <th style="width:190px;">Of Sheets</th>
            <th style="width:100px;">Frame Nbr</th>
            <th style="width:140px;">Of Frames</th>
            <th style="width:90px;">Doc Title</th>
            <th style="width:190px;">Note</th>
            <th style="width:100px;">Prnt</th>
            <th style="width:140px;">Obs</th>
            <th style="width:90px;">Acquire Date</th>
            <th style="width:190px;">Source</th>
            <th style="width:100px;">Base Doc</th>
            <th style="width:140px;">Acc Doc Nbr</th>
            <th style="width:90px;">CommonSubDirectory</th>
        </tr> 
    </thead>
    <tbody id="TmageDataBody" style="overflow:scroll">
        <tr>
            <td class="WholeNumberCell"></td>
            <td class="WholeNumberCell">
                 ST
            </td>
            <td class="WholeNumberCell">
                 A
            </td>
            <td class="WholeNumberCell">
                 undefined
            </td>
            <td class="WholeNumberCell">
                 null
            </td>
            <td class="WholeNumberCell">
                 6
            </td>
            <td class="WholeNumberCell">
                10
            </td>
            <td class="WholeNumberCell">
                1
            </td>
            <td class="WholeNumberCell">
                1
            </td>
            <td class="WholeNumberCell">
                JOGGLING OF ALUMINUM ALLOY EXTRUDED
           </td>
           <td class="WholeNumberCell">
                91179
           </td>
           <td class="WholeNumberCell">
           </td>
           <td class="WholeNumberCell">
                No
           </td>
           <td class="WholeNumberCell">
                No
           </td>
           <td class="WholeNumberCell">
                0
           </td>
           <td class="WholeNumberCell">
           </td>
           <td class="WholeNumberCell">
           </td>
           <td class="WholeNumberCell">
               \CDVolumes
           </td>
       </tr>
   </tbody>
</Table></tbody>
</Table>

任何人都知道我做错了什么？

Answer 1

#ImageDataTable {
    border: 1px solid black;
    border-spacing: 0;
    padding: 0;
}

... 

<Table id="ImageDataTable" style="overflow:scroll;">

你告诉你的桌子，当它溢出时，它应该滚动。所以桌子愉快地占用了所需的空间，然后看着它是否溢出 - 不！所以它不会滚动。

如果您希望表格滚动，您需要准确定义表格的大小，例如，使用div围绕它，或者通过指定表格中的max-height或max-width。然后该表将在该区域中呈现自己，并看到它（很可能）被切断，并粘在滚动条中。

希望这有帮助。

如何制作包含动态数据的滚动表

1 个答案: