HTML-таблица с горизонтальной прокруткой (исправлена ​​первая колонка)

Question

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

Answer 1

Я подобный стол в стиле так:

<table style="width:100%; table-layout:fixed"> 
    <tr> 
     <td style="width: 150px">Hello, World!</td> 
     <td> 
      <div> 
       <pre style="margin:0; overflow:scroll">My preformatted content</pre> 
      </div> 
     </td> 
    </tr> 
</table> 

Answer 2

Посмотрите на это JQuery плагин:

http://fixedheadertable.com

Он добавляет вертикальный (фиксированная строка заголовка) или горизонтальный (фиксированный первый столбец), прокручивающийся до существующей таблицы HTML. Существует демо-версия, которую вы можете проверить для обоих случаев прокрутки.

Answer 3

Используйте плагин jQuery DataTables, он поддерживает фиксированный заголовок и столбцы. Этот пример добавляет поддержку фиксированного столбца в HTML таблице "пример":

http://datatables.net/extensions/fixedcolumns/

Для двух фиксированных столбцов:

http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html

Answer 4

Как насчет:

table { 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    *margin-left: -100px; /*ie7*/ 
 
} 
 
td, th { 
 
    vertical-align: top; 
 
    border-top: 1px solid #ccc; 
 
    padding: 10px; 
 
    width: 100px; 
 
} 
 
.fix { 
 
    position: absolute; 
 
    *position: relative; /*ie7*/ 
 
    margin-left: -100px; 
 
    width: 100px; 
 
} 
 
.outer { 
 
    position: relative; 
 
} 
 
.inner { 
 
    overflow-x: scroll; 
 
    overflow-y: visible; 
 
    width: 400px; 
 
    margin-left: 100px; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <table> 
 
     <tr> 
 
     <th class=fix></th> 
 
     <th>Col 1</th> 
 
     <th>Col 2</th> 
 
     <th>Col 3</th> 
 
     <th>Col 4</th> 
 
     <th class="fix">Col 5</th> 
 
     </tr> 
 
     <tr> 
 
     <th class=fix>Header A</th> 
 
     <td>col 1 - A</td> 
 
     <td>col 2 - A (WITH LONGER CONTENT)</td> 
 
     <td>col 3 - A</td> 
 
     <td>col 4 - A</td> 
 
     <td class=fix>col 5 - A</td> 
 
     </tr> 
 
     <tr> 
 
     <th class=fix>Header B</th> 
 
     <td>col 1 - B</td> 
 
     <td>col 2 - B</td> 
 
     <td>col 3 - B</td> 
 
     <td>col 4 - B</td> 
 
     <td class=fix>col 5 - B</td> 
 
     </tr> 
 
     <tr> 
 
     <th class=fix>Header C</th> 
 
     <td>col 1 - C</td> 
 
     <td>col 2 - C</td> 
 
     <td>col 3 - C</td> 
 
     <td>col 4 - C</td> 
 
     <td class=fix>col 5 - C</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Вы можете проверить его в этом jsbin: http://jsbin.com/uxecel/4/edit