How To: 100% таблица высоты только Прокрутить тём

Можно ли прокручивать содержимое таблицы высот 100%, а не заголовка с помощью CSS и показывать только полосу прокрутки в стороне содержимого tbody, а не строки заголовка? Спасибо!

Ответ 1

Таблицы - сложный бизнес. Я думаю, вы хотите использовать их для смысловых и резервных целей, но они несколько негибкие.

К счастью, некоторые уже выяснили не один, а 2 хорошие методы достижения прокручиваемых эффектов.... в ~ 2005 году.

http://www.cssplay.co.uk/menu/tablescroll.html

Им по-прежнему нужна дополнительная html-разметка, чтобы сделать ее возможной, а вторая таблица эффективно использует вложенную таблицу, но резервный/обычный HTML выглядит как обычная простая таблица.

Метод # 1

Наружный div с заполнением, чтобы создать "поле" для элементов. Внутренний div, который делает внутреннюю таблицу прокручиваемой. Строка таблицы thead абсолютно позиционируется, чтобы заставить ее оставаться на вершине тела, то же самое делается с нижним колонтитулом. Поскольку внутренний div равен overflow: auto, а высота определяет остальные строки таблицы, падающие в линию в области scollable.

Метод # 2

Внешняя таблица - обычная таблица, верхний и нижний колонтитулы - в обычном порядке. Но тень внешней таблицы содержит только одну строку, один столбец и в ней есть другая таблица. Этот столбец имеет определенную высоту и overflow: auto, поэтому в нем будет прокручиваться возможность (в котором есть только контент).

Ответ 2

Решение javascript должно использовать "плавающие заголовки". Вы помещаете всю таблицу в div с набором переполнения, тогда JavaScript будет клонировать заголовок таблицы и помещать его в начало div, немного как интерфейс Apple.

Пример jQuery http://fixedheadertable.com/

Обратите внимание, что это становится очень сложным, если вы делаете другие вещи в таблице, такие как сортировка на стороне клиента, фильтрация и т.д.

Ответ 3

Надеюсь, еще не слишком поздно, и вы все еще живы, с тех пор многое улучшилось :)

Ты можешь использовать:

table {
  display: inline-grid;
  grid-template-areas: 
  "head-fixed" 
  "body-scrollable";
}

thead {
  grid-area: head-fixed;
}

tbody {
  grid-area: body-scrollable;
  overflow: auto;
  height: calc(100vh - 55px);
}

Прокручиваемая таблица (tbody) со 100% высотой и фиксированным заголовком на JSFiddle: http://jsfiddle.net/gengns/p3fzdc5f/

Ответ 4

Невозможно с чистым CSS, насколько я знаю (по крайней мере, не перекрестный браузер), но с использованием плагина jQuery это возможно и очень просто, например. jQuery.FixedTable.

Ответ 5

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

Здесь пример того, как делать фиксированный заголовок и прокручиваемый контент, используя в таблице. Код:

<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Fixed Header in table</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="height: 100%">
  <table style="display: flex; height: 100%; flex-direction: column">
    <thead>
      <tr>
        <td>HEADER<br/>------------</td>
      </tr>
    </thead>
    <tbody style="flex: 1; overflow: auto">
        <tr>
          <td>
          <div>
              CONTENT - START<br/>
              <script>
              for (var i=0 ; i<1000 ; ++i) {
                document.write(" Very long content!");
              }
              </script>
              <br/>CONTENT - END
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  </body>
</html>

Для полной реализации Holy Grail (заголовок, нижний колонтитул, nav, side и content), используя гибкий дисплей, перейдите к здесь.

Ответ 6

Если возможно в вашем сценарии, простой альтернативой было бы поместить заголовок в отдельный div и таблицу внутри другого div с высотой apt и применить следующие свойства к div.

overflow-x: hidden;
overflow-y: scroll;

Ответ 7

Матовый, который прост. Вот что вы хотите сделать

CSS

<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }

  html, body{ width: 100%; height: 100%;}
  table{
    width: 100%;
    height: 100%;
    background-color: #aaa;
  }

  tbody{
    width: 100%;
    height: 100%;
    -display: block;
    background-color: #ccc;
    overflow-y: scroll;
    overflow-x: hidden;

  }

  td{
    width: 100px;
    height: 200px;
    background-color: #eee;
  }


</style>

HTML:

<table>

  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
     <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>

</table>

Ответ 8

У меня была аналогичная проблема, получая только содержимое под заголовком, чтобы прокручиваться и оставаться на 100% от оставшейся высоты. Вот мое решение:

http://jsfiddle.net/ajkochanowicz/YDjsE/

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

#container {
  border: 1px solid red;
  width: 200px;
  height: 250px; /* This can be any height and everything fills in */
  padding-top: 55px;            
}
#something-else {
  height: 55px;
  width: 200px;
  background-color: green;
  margin-top:-55px;    
}
#overflow {
  border: 1px solid blue;
  width:198px;
  overflow-y: auto; 
  height: 100%;   
}

Ответ 9

попробуйте этот файл CSS:

table{
    width: 100%;
    height: 400px;
    background-color: #aaa;
  }

  tbody{
     background-color: #CCCCCC;
    display: block;
    height: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
  }

  td{
    width: 100px;
    height: 30px;
    background-color: #eee;
  }

thead {
    display: block;
    height: 30px;
    width: 100%;
}

работает в моем firefox.. не тестировался нигде..:)