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

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

Ответы [ 5 ]

96 голосов
/ 23 января 2013

Как насчет:

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

23 голосов
/ 05 августа 2010

У меня похожая таблица в стиле:

<code><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
9 голосов
/ 14 сентября 2011

Используйте плагин jQuery DataTables, он поддерживает фиксированный заголовок и столбцы. В этом примере добавлена ​​поддержка фиксированных столбцов в HTML-таблицу «example»:

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

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

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

4 голосов
/ 04 ноября 2016

Основываясь на подходе skube, я обнаружил, что минимальный набор CSS, который мне нужен был:

.horizontal-scroll-except-first-column {
    width: 100%;
    overflow: auto;
    margin-left: 20em;
}

.horizontal-scroll-except-first-column > table > * > tr > th:first-child,
.horizontal-scroll-except-first-column > table > * > tr > td:first-child {
    position: absolute;
    width: 20em;
    margin-left: -20em;
}

.horizontal-scroll-except-first-column > table > * > tr > th,
.horizontal-scroll-except-first-column > table > * > tr > td {
    /* Without this, if a cell wraps onto two lines, the first column
     * will look bad, and may need padding. */
    white-space: nowrap;
}

с HTML:

<div class="horizontal-scroll-except-first-column">
    <table>
        ...
    </table>
</div>
4 голосов
/ 04 января 2011

Взгляните на этот плагин JQuery:

http://fixedheadertable.com

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...