Таблица с фиксированным заголовком и динамической высотой

Question

Я знаю, что на эти вопросы уже много ответов, но не соответствует моим требованиям. У меня есть таблица неизвестной высоты и ширины, и мне нужно, если таблица слишком высока, так что нужно прокручивать ее, чтобы заголовки таблицы оставались фиксированными и следовали за прокруткой. Все решения, которые я видел, требуют фиксированной высоты таблицы. Я также хотел бы, чтобы свиток был невидим, пока он все еще функционирует. Может ли это быть достигнуто или мне нужна фиксированная высота?

Мой CSS до сих пор дает мне возможность прокрутки по вертикали и по горизонтали (я только хочу вертикальной прокрутки), но с фиксированной высотой и видимой полосы прокрутки:

table.sol-compare-table { 
    box-sizing: border-box; 
    overflow: hidden; 
    display: table; 
    width: 100%; 
} 
table.sol-compare-table thead, table.sol-compare-table tbody { 
    float: left; 
    width: 100%; 
} 
table.sol-compare-table tbody { 
    overflow: auto; 
    height: 150px; 
    /*overflow-x: hidden;*/ 
} 
table.sol-compare-table tr { 
    width: 100%; 
    display: table; 
    text-align: left; 
} 

Вот мой HTML:

<table class="table sol-compare-table"> 
<thead> 
    <tr> 
     <th> 
      <div> 
       <a class="sol-pdf-generator hover-gray-icon sol-share-icon" target="_blank" ng-href="#"> 
        <i class="fa fa-file-pdf-o"></i> 
        Ladda ner som PDF 
       </a> 

       <a class="sol-share-facebook hover-gray-icon sol-share-icon" onclick="#"> 
        <img src="#" alt="facebook"> 
       </a> 

       <a class="sol-share-twitter hover-gray-icon sol-share-icon" onclick="#"> 
        <img src="#" alt="twitter"><!--<i class="fa fa-twitter"></i>--> 
       </a> 

       <a class="sol-share-mail hover-gray-icon sol-share-icon" onclick="#"> 
        <i class="glyphicon glyphicon-envelope"></i> 
       </a> 
      </div> 
       <h2 class="sol-compare-heading">Allmän Information<h2> 
     </th> 

     <th ng-repeat="unit in units" class="sol-compare-heading"> 
      <div> 
       <a href="#/unitDetail/{{unit.Id}}"> 
        <img class="detail-main-image" ng-if="getImageOfUnit(unit).Value.Id" ng-src="#"></img> 
       </a> 
      </div> 
       <a href="#"></a> 
     </th> 
      </tr> 
     </thead> 
     <tbody>    
      <tr ng-repeat="#"> 
       <td>Name</td> 
       <td ng-repeat="unit in units"> 
         <span ng-if="unitAttr.Value != null"> 
          <span print-attribute="#"></span> 
         </span> 
         <span ng-repeat="#" ng-if="unitAttr.Values"> 
          # 
         </span> 
         <span ng-if="# == null && unitAttr.Values == null"> 
          - 
         </span> 
       </td> 
      </tr> 
     </tbody> 
</table> 

EDIT

---

Я попытался с помощью позиции: фиксированный в заголовке таблицы и й почти выполнив то, что мне нужно, только чтобы он всегда фиксировался в верхней части страницы (при прокрутке вниз он должен следовать прокрутке, но в той же позиции в окне браузера). Этот JSfiddle - самый простой способ показать, где я нахожусь в atm. http://jsfiddle.net/rwqkokgy/5/

Answer 1

Для вертикального скроллинга Вы должны использовать overflow-y:scroll; overflow-x:hidden;

Вы можете использовать overflow-y:auto; и вертикальную полосу прокрутки будет показать/скрыть зависит от содержимого таблицы.

Существует один пример, но с двумя таблицами. Первый - заголовок и второй для содержимого таблицы. Возможно, вы можете добиться этого.

jsfiddle example

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

Эта кнопка и функция js под названием chVl Вы можете удалить. Первая функция, называемая checkW, используется при изменении размера вашего браузера.

Надеюсь, это поможет вам.

Edit:

Если Вы хотите, чтобы вертикальная полоса прокрутки все время, а затем сделать следующий (в представленной jsfiddle примере):

1. Удалить onload и onresize из body
2. Удалить полный javascript
3. В #container (css) для overflow-y заменить из auto к scroll

О height в #container, Вы можете изменить его с вашими потребностями.

И, конечно, удалите это button, как я написал выше. Его цель - просто симуляция, больше ничего.

Answer 2

Теперь я использую угловую директиву, называемую «липкой», которая делает ее так, чтобы «липкий» элемент (который я установил как заголовок таблицы) при прокрутке приклеивается к верхней части экрана.

Для получения дополнительной информации об этой директиве, пожалуйста, перейдите по этой ссылке: http://angularscript.com/angularjs-directive-create-fixed-elements-scroll-angular-sticky/

Это было очень легко реализовать и требует почти никакого кодирования вообще.