Создание таблицы с прокруткой вниз

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> 

EDIT:

Вы можете использовать позицию абсолютного в таблице также, если вам нужно иметь.

<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, таблица внутри всегда будет вычислять свои размеры и положение на основе какого-либо другого внешнего элемента, и поэтому не может определить, куда он должен прокручиваться, а где нет.

Answer 2

Я добавил 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>

Answer 3

(я думаю, вы хотите создать что-то вроде этого)

Scroll-баре и переполнение, переполнение собственность

Значение по умолчанию:visible означает, что он будет продолжать расти при добавлении контента. Другого значения:

• hidden, когда новое содержание перетекает ваш элемент будет (часть) невидим,
• scroll Спиральных-баре будут видны, не имеют значения, если есть содержание перелив вашего элемента ,
• auto есть довольствуется перелив вашего элемента там мы быть свиток-баром для прокрутки

переполнения может принимать только значение 1, если вы хотите, чтобы указать ведьму оси вы можете использовать переполнение-х/перелив-й свойство ! будьте осторожны, если вам нужна поддержка IE, IE < 7 не поддерживает -x или -y! IE8 использует префикс (ms-).

/*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);

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