html - 向下滚动创建表格

Question

我正在尝试创建一个表格，其中每一行都有固定的高度，但是当达到特定高度时会出现滚动条。

表格的代码是:

<div style="postion: relative; left: 100px; height: 100px; width: 450px; overflow-y: auto">

    <table id="dataTable" style="position: absolute; left: 100px; height: 100px; width: 400px">
        <tr>
            <th>Data Source </th>
            <th>File Type </th>
            <th>FIles</th>
        </tr>
        <tr>
            <td>EDI DATA </td>
            <td>
                <select>
                    <option>ALL </option>
                    <option>CSV</option>
                    <option>xls </option>
                    <option>sap</option>
                </select>
            </td>
            <td>
                <ul>
                    <li>EDI_Aug.csv</li>
                    <li>EDI_Aug.xls </li>
                    <li>EDI_Aug.xls </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>RECEIPT DATA </td>
            <td>
                <select>
                    <option>CSV</option>
                    <option>xls </option>
                    <option>sap</option>
                </select>
            </td>
            <td>
                <ul>
                    <li>RECEIPT_Aug.csv</li>
                    <li>RECEIPT_Aug.xls </li>
                    <li>RECEIPT_Aug.xls </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>CARRIER DATA </td>
            <td>
                <select>
                    <option>CSV</option>
                    <option>xls </option>
                    <option>sap</option>
                </select>
            </td>
            <td>
                <ul>
                    <li>CARRIER_Aug.csv</li>
                    <li>CARRIER_Aug.xls </li>
                    <li>CARRIER_Aug.xls </li>
                </ul>
            </td>
        </tr>
    </table>

但是随着我不断添加行，表格的高度不断增加。我希望表格的高度固定，当添加的数据超过表格高度时出现滚动条。

Answer 1

为什么表格有绝对位置？

如果你删除它，那么你的代码就可以工作了。

所以代码看起来像这样:

<div style= "postion:relative;left:100px;height:100px;width:450px;overflow-y:auto;">
  <table id ="dataTable" style = "left:100px;height:100px;width:400px">
    ...
  </table>
</div>

编辑:

如果需要，您实际上也可以在表格中使用绝对位置。

<div style= "position:relative;left:100px;height:100px;width:450px;overflow-y:auto;">
  <table id ="dataTable" style = "left:100px;height:100px;width:400px">
    ...
  </table>
</div>

您只是在外部 div postion:relative; 上打错了字，这导致了您的问题。

将外部 div 的位置设置为 relative 使得其内部的绝对位置表将其位置和高度基于具有固定高度的外部 div，而不是基于其他一些 div 或在“最坏”情况下的主体。如果没有外部的、相对定位的 div，内部的表格将始终根据其他外部元素计算其尺寸和位置，因此无法确定它应该滚动到哪里以及不应该滚动到哪里。