通过向下滚动创建表

时间：2016-05-06 10:10:07

标签： html css

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

该表的代码是：

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

但随着我不断添加行，表的高度不断增加。我希望固定表格的高度，并在添加的数据超出表格高度时显示滚动条。

3 个答案:

答案 0 :(得分：5)

为什么表格的位置是绝对的？

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

所以代码看起来像这样：

<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具有固定的高度，而不是在其他div上或在“最坏”的情况下。没有外部的，相对定位的div，内部的表将始终根据其他一些外部元素计算其尺寸和位置，因此无法确定它应该滚动的位置和不在哪里。

答案 1 :(得分：1)

我已将overflow-y添加到scroll标记中的div。 Scroll表示......

  

...内容被剪裁并提供滚动机制

这就是你想要的吗？.. 

div {
  position: relative;
  height: 100px;
  width: 450px;
  overflow-y: scroll;
  border: 1px solid red;
}

.dataTable {
  position: absolute;
  left: 100px;
  height: 100px;
  width: 400px
}

table {
  border: 1px dashed gray;
}
<div>
  <table class="dataTable">
    <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>

答案 2 :(得分：1)

（我想你想创造这样的东西）

滚动条和溢出，溢出属性

默认值： visible意味着在添加内容时它会继续增长。 其他价值：

  • hidden当新内容溢出您的元素时，它将是 （部分）隐形，
  • scroll滚动条将会显示，如果有内容则无关紧要 溢出你的元素。
  • auto是否有内容溢出您的元素我们是滚动条滚动

溢出只能取1个值，如果你想指定巫婆轴你可以使用overflow-x / overflow-y属性！请注意，如果您需要支持IE，IE＆lt; 7不支持 -x 或 -y ！ IE8使用前缀(ms-)。

＆＃13;
＆＃13; 
  /*action*/
  div {
    position: absolute;
    left: 50px;
    right: 50px;
    top: 50px;
    bottom: 50px;
    overflow-y: scroll;
  }
  /*style*/
  table {
    width: 100%;
    background-color: rgba(241, 0, 241, 0.3);
  }
  tr {
    background-color: rgba(241, 241, 0, 0.3);
  }
  /*webkit style*/
  ::-webkit-scrollbar {
    width: 7px;
  }
  /* Track */
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }
  /* Handle */
  ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(237, 28, 36, 0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }
  ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(237, 28, 36, 0.4);
＆＃13; 
<div>
  <table>
    <tbody>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
      <tr>
        <td>my big row</td>
      </tr>
    </tbody>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题