Макс. Высота в таблице Html

Я создаю таблицу, и я хочу, чтобы она height была 800px.

Если это переполнение, я хочу сделать панель прокрутки, но заголовки не прокручиваются.

Итак, я пытаюсь добавить этот CSS:

overflow: scroll;
max-height:800px;

Но это не работает для меня. Это весь html файл. В чем проблема?

CSS

table{
    overflow: scroll;
   text-align: center;
   margin: auto;
   max-height:800px;
}
table, td, th
{
border:1px solid green;

}
th
{
background-color:green;
color:white;
}

И HTML

<table >
  <tr>
   <th>field a</th>
   <th>field b</th>
   <th>field c</th>
   <th>field e</th>
  </tr>
  <tr>
   <td>3534534</td>
   <td>עו"ש</td>
   <td>6,463</td>
   <td>4,000</td>
  </tr>
  <tr>
   <td>3534534</td>
   <td>עו"ש</td>
   <td>6,463</td>
   <td>4,000</td>
  </tr>
</table>

Спасибо!!!

Ответы

Ответ 1

Вы можете обернуть таблицу в div и дать max-height и overflow: scroll этому div

<div class="pane">
    <table>
        <tr>
            <th>field a</th>
            <th>field b</th>
            <th>field c</th>
            <th>field e</th>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        ...
    </table>
</div>

.pane {
    display: inline-block;
    overflow-y: scroll;
    max-height:200px;
}
table {
    text-align: center;
    margin: auto;
}

JSFiddle

Другое решение в Чистая таблица прокрутки CSS с фиксированным заголовком без обертки div, но с дополнительными thead и tbody вокруг строки. Вы устанавливаете thead и tbody на display: block и даете t max-height и overflow-y. Это позволяет заголовку оставаться на месте при прокрутке строк. Но, как всегда, он поставляется с ценой. Вы должны указать ширину столбцов, потому что thead и tbody не синхронизированы из-за display: block

<table>
    <thead>
        <tr>
            <th>field a</th>
            <th>field b</th>
            <th>field c</th>
            <th>field e</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        ...
    </tbody>
</table>

thead {
    display: block;
}
tbody {
    display: block;
    overflow-y: scroll;
    max-height:200px;
}
thead th, tbody td {
    width: 70px;
}

JSFiddle

Update:

В исходном коде этого сайта есть комментарии об IE и IE6. Он устанавливает

thead tr {
    position: relative
}

и определяет ширину таблицы с помощью

table {
    float: left;
    width: 740px
}

Это важно для IE10, я не знаю.

Ответ 2

Используйте другой элемент для обертывания всей таблицы и дайте ему следующие свойства:

#table-limiter {
max-height:800px;
overflow: scroll;
}

Пример HTML:

<div id="table-limiter">
   <table>
      ...
   </table>
</div>

Таблица стилей, иногда, проблема: (

Ответ 3

Здесь один подход.

Добавьте обертку div с CSS:

#set-height {
    display: inline-block;
    height:800px;
    overflow: scroll;
}

Fiddle: http://jsfiddle.net/JmLFz/

Ответ 4

Оберните таблицу в тег div и установите высоту div на 800px с автоматическим переполнением.

<div style="height:800px; overflow:auto;">
//Table goes here
</div>

Затем, если высота стола превышает 800 пикселей, в div появится полоса прокрутки и позволит вам прокручивать таблицу.