通过向下滚动创建表

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的位置设置为相对使得它内部的绝对位置表基础上其外层的div位置和高度,其中有一个固定的高度,而不是一些其他分区或"最差"的情况下身体.如果没有外部的,相对定位的div,内部的表将始终根据其他一些外部元素计算其尺寸和位置,因此无法确定它应该滚动的位置和不在哪里.