Как заблокировать столбцы в таблице HTML?

Я возвращаю большое количество табличных данных, которые хочу отобразить с помощью таблицы. Единственное предостережение заключается в том, что я хотел бы иметь возможность «заблокировать» несколько столбцов (fname/lname/email), чтобы при горизонтальной прокрутке пользователями эти столбцы всегда оставались «заблокированными» на месте и были видны. Я делал что-то подобное раньше, но это было еще во времена набора фреймов, поэтому этот подход больше не действует.

Я думал о том, чтобы сделать что-то умное с размещением столов друг на друге, но до сих пор у меня не было успеха в этой работе. Есть у кого умные предложения?

Прекрасный пример того, что я пытаюсь сделать, находится здесь: http://www.google.com/squared/search?q=world+leaders


javascript html jquery dhtml
person Nicholas Kreidberg    schedule 16.10.2009    source источник
comment
Вы можете использовать iframe, но IME - это королевская боль, чтобы убедиться, что заголовки столбцов имеют тот же размер, что и фактические данные...   -  person OMG Ponies    schedule 16.10.2009
comment
Нашел этот связанный вопрос stackoverflow.com/questions/1100835/   -  person Peter Bailey    schedule 16.10.2009
comment
Ах, это именно то, что я ищу, спасибо, что указали на этот пост!   -  person Nicholas Kreidberg    schedule 16.10.2009
comment
К сожалению, решения, размещенные там, не соответствуют номиналу. JavaScript, который является принятым решением, замедляет сканирование даже при небольшом количестве строк таблицы. Я работаю только с 500 и его нельзя использовать.   -  person Nicholas Kreidberg    schedule 19.10.2009

Ответы (3)


arrow_upward
2
arrow_downward

Если я правильно понял, что вы хотите, вы можете иметь контейнер div с позицией: относительная, переполнение: авто и фиксированная ширина. Внутри него вы отделяете ту часть, которую хотите заблокировать, от другой, скажем, на два разных div. Div, содержащий «заблокированную» часть, должен иметь position: absolute и left: 0.

Это всего лишь общая картина, но таким образом вы сможете добиться того, чего хотите.

person treznik    schedule 16.10.2009
comment
Я делал то же самое в прошлом вручную, и это работало отлично - DataTables (плагин jQuery) сделает это автоматически для вас с этим расширением, которое немного облегчает жизнь! datatables.net/extras/fixedcolumns - person Luke Baughan; 18.10.2012
comment
Есть ли способ сделать это без Javascript, например. чистый CSS? - person lanoxx; 25.09.2013

arrow_upward
0
arrow_downward

Код ниже должен быть довольно понятным. Вы можете добавлять/удалять строки из TBODY, в то время как THEAD остается совершенно статичным. Для этого существуют TBODY и THEAD ;)

<style type="text/css" media="screen">
  .myTable
  {
    border:1px solid #000;
    border-spacing:0px;
    width:300px
  }

  .myTable thead td
  {
    background-color:#000;
    color:#FFF;
  }

  .myTable tbody
  {
    height:300px;
    overflow-y:auto;
    overflow-x:hidden;
  }
</style>

<table class="myTable">
  <thead>
    <tr>
      <td>Fname</td>
      <td>Lname</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lior</td>
      <td>Cohen</td>
    </tr>
    <tr>
      <td>Lior</td>
      <td>Cohen</td>
    </tr>
    <!-- put more rows here -->
  </tbody>
</table>
person Lior Cohen    schedule 16.10.2009
comment
Я немного смущен, как удерживать вещи на месте? У меня будет несколько элементов, которые мне нужны в ‹thead›, но я хочу, чтобы только пара из них (для целей этого примера давайте просто назовем один из них, поэтому имя) оставались заблокированными. Пример из реальной жизни = google.com/squared/search?q=world+leaders -- обратите внимание, что имена никогда не меняются. - person Nicholas Kreidberg; 17.10.2009
comment
Извините, тогда я неправильно понял вашу проблему. Я думал, вы имели в виду таблицу со статической строкой заголовков и прокручиваемым содержимым тела. Я обновлю этот пост tmw решением, которое также охватывает заблокированный левый столбец (если вам больше не нужен ответ, поскольку он у вас уже есть). - person Lior Cohen; 17.10.2009
comment
Нет, на самом деле мне все еще нужно решение, я до сих пор не нашел ничего, что меня удовлетворило бы. - person Nicholas Kreidberg; 18.10.2009

arrow_upward
0
arrow_downward

Что-то вроде этого должно работать:

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

Конечно, это не работало в IE7. Это может работать в 8, но как всегда YMMV. Удачи. Я надеюсь, что это поможет вам начать в правильном направлении.

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var body = $('#table-body');
        for (var i = 0; i < 100; i++) {
          var row = $('<tr />');
          var fname = $('<td />')
            .text('FirstName' + i);
          var lname = $('<td />')
            .text('LastName' + i);
          var email = $('<td />')
            .text('FirstLast' + i + '@example.com');
          row
            .append(fname)
            .append(lname)
            .append(email);
          body.append(row)
        }
      });
    </script>
    <style type="text/css">
      #table-body {
        height: 150px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Email</td>
      <thead>
      <tbody id="table-body">
      </tbody>
    </table>
  </body>
</html>
person Stephen Delano    schedule 16.10.2009