Горизонтальная прокрутка по таблице с фиксированным заголовком

Question

Я создал фиксированный заголовок с использованием CSS (в основном, просто устанавливая положение ада для исправления), но проблема, с которой я столкнулся, заключается в том, что размер разрешения или размер окна пользователя чем размер таблиц, мне нужно добавить горизонтальную полосу прокрутки, чтобы они могли видеть все. я попробовал настройку переполнения для автоматического и прокрутки, но только при прокрутке вниз до нижней части страницы появляется полоса прокрутки. Также мне нужно иметь прокрутку thead со столом. Любые предложения о том, что горизонтальная полоса прокрутки отображается, если окно меньше размера таблиц, и как у вас все еще фиксируется в одной позиции, но все же прокрутите, чтобы увидеть больше, если размер окна слишком мал?

http://jsfiddle.net/E9mqk/1/

HTML, является:

<div class="table-wrapper"> 
<table id="table-information"> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <thead class="table-fixed-header" id="table-data"> 
     <tr> 
      <th>Something 1</th> 
      <th>Something 2</th> 
      <th>Something 3</th> 
      <th>Something 4</th> 
      <th>Something 5</th> 
      <th>Something 6</th> 
      <th>Something 7</th> 
      <th>Something 8</th> 
     </tr> 
    </thead> 
    <tbody class="table-body"> 
     <tr> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
     </tr> 
     <tr> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
     </tr> 
     <tr> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

И CSS является:

.table-wrapper { 
    overflow-x: scroll; 
} 
.table-fixed-header { 
    position: fixed; 
} 
#table-information tbody:before { 
    line-height: 30px; 
    content:"-"; 
    color:white; /* to hide text */ 
    display:block; 
} 
#table-information td { 
    max-width: 100px; 
    min-width: 100px; 
} 
#table-information th { 
    max-width: 100px; 
    min-width: 100px; 
} 

Answer 1

Предполагая, что вы не делаете что-то в JavaScript, который производит странное поведение на столах, вы можете просто оберните таблицу в

<div style="overflow-x: scroll;"> 
    [your table here] 
</div> 

или какой-либо другой элемент блока с тем же стилем, и вы получите поведение, которое вы ищете, включая прокрутку головы и тела вместе - см. this jsfiddle для рабочего примера.