Подтвердить что ты не робот

HTML фиксированная таблица прокрутки таблицы заголовков

Возможный дубликат:
Таблица HTML с фиксированными заголовками?

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

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

Обновление. Мне очень важно получить эту функциональность. Мне нужен фиксированный заголовок для заголовков столбцов и строк. До сих пор никакое решение не работало должным образом. Я рассматривал возможность создания заголовков в отдельных таблицах, но это не сработает при прокрутке, так как заголовки останутся фиксированными.

Похоже, что для фиксированных заголовков HTML будет много вариантов использования, поэтому мне удивительно, что нет адекватного решения.

(О, и я попробовал опцию, предложенную opatut в ссылке, но она не работает во всех браузерах, и мне нужна эта работа в Internet Explorer, Firefox и Chrome. Если она не работает в Internet Explorer 6 это ОК).

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

4b9b3361

Ответ 1

У меня есть решение, которое является чистым решением CSS и позволяет таблице быть нормальной и переменной шириной. Это новое решение и имеет некоторые проблемы в зависимости от дизайна ваших заголовков. Хорошей новостью является то, что если ваши заголовки выровнены по левому краю или ваши столбцы имеют фиксированную ширину, все должно быть хорошо. В IE6 есть некоторые визуальные ошибки, и я обнаружил, что некоторым ячейкам нужна минимальная ширина, чтобы заголовки отображались, если содержимое в столбце менее широкое, чем заголовок. Все проблемы визуальны, поэтому, если они выглядят хорошо, все готово. Тело таблицы абсолютно нормальное, и поскольку нет JavaScript, вам не нужно ничего делать, если пользователь изменяет размеры страницы.

Ознакомьтесь с моим решением и оставьте мне комментарий http://salzerdesign.com/blog/?p=191

Ответ 2

Я знаю, что вы пытаетесь избежать Javascript, но я был в той же лодке, что и вы (борется с тем, что делать в течение нескольких дней на точной задаче для нового приложения) и решил проблему примерно через 10 минут после того, как я найдено Datatables:

Рабочий пример решения: http://www.datatables.net/examples/basic_init/scroll_y.html

Он ТОЧНО каждый раз сопоставляет столбцы заголовка и тела по ширине. Ширины могут быть указаны, но они также достаточно интеллектуальны для автоматического размера. Выделение и сортировка столбцов поддерживается по умолчанию, используя предоставленный образец CSS. Переход на страницу с разбивкой по страницам (то, что я закончил использовать) - это одна строка кода. И... лучшая часть - если вы обеспокоены тем, что у вашего пользователя может быть включен Javascript, он полностью отступает от стандартов, совместимых со стандартами. ИМХО, это наименее болезненное, наиболее функциональное решение, которое полностью поддерживает IE.

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

Ответ 3

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

  <style>
    th { text-align: center; border: 1px solid black; padding:3px; }
    td { text-align: center; border: 1px solid black; padding:3px; }
    th.c1, td.c1 { width: 100px; }
    th.c2, td.c2 { width: 150px; }
    th.c3, td.c3 { width: 60px; }
    th.c4, td.c4 { width: 100px; }
    th.c5, td.c5 { width: 150px; }
    th.c6, td.c6 { width: 60px; }

    #rowScroll { height: 100px; } /* Subtract the scrollbar height */
    #contentScroll { height: 100px; width: 300px; }
    #colScroll { width: 272px; } /* Subtract the scrollbar width */
  </style>

    <table cellspacing="0" cellpadding="0" style="float: left;" style="width:300px; height:100px;" >
      <tr>
        <td id="void" style="border: 0;">
        </td>
        <td id="rowHeaders" style="border: 0;">
          <div id="colScroll" style="overflow-x:hidden;">
            <table cellspacing="0" cellpadding="0" style="width: 600px;">
              <tr>
                <th class="c1">A</th>
                <th class="c2">B</th>
                <th class="c3">C</th>
                <th class="c4">D</th>
                <th class="c5">E</th>
                <th class="c6">F</th>
              </tr>
            </table>
          </div>
        </td>
      </tr>
      <tr>
        <td id="colHeaders" style="border: 0;">
          <div id="rowScroll" style="overflow-y:hidden">
            <table cellspacing="0" cellpadding="0">
              <tr><td>R1</td></tr>
              <tr><td>R2</td></tr>
              <tr><td>R3</td></tr>
              <tr><td>R4</td></tr>
              <tr><td>R5</td></tr>
              <tr><td>R6</td></tr>
              <tr><td>R7</td></tr>
              <tr><td>R8</td></tr>
              <tr><td>R9</td></tr>
            </table>
          </div>
        </td>
        <td id="content" style="border: 0;">
          <div id="contentScroll" style="overflow:auto">
            <table cellspacing="0" cellpadding="0" style="width: 600px;">
              <tr><td class="c1">A1</td><td class="c2">B1</td><td class="c3">C1</td><td class="c4">D1</td><td class="c5">E1</td><td class="c6">F1</td></tr>
              <tr><td class="c1">A2</td><td class="c2">B2</td><td class="c3">C2</td><td class="c4">D2</td><td class="c5">E2</td><td class="c6">F2</td></tr>
              <tr><td class="c1">A3</td><td class="c2">B3</td><td class="c3">C3</td><td class="c4">D3</td><td class="c5">E3</td><td class="c6">F3</td></tr>
              <tr><td class="c1">A4</td><td class="c2">B4</td><td class="c3">C4</td><td class="c4">D4</td><td class="c5">E4</td><td class="c6">F4</td></tr>
              <tr><td class="c1">A5</td><td class="c2">B5</td><td class="c3">C5</td><td class="c4">D5</td><td class="c5">E5</td><td class="c6">F5</td></tr>
              <tr><td class="c1">A6</td><td class="c2">B6</td><td class="c3">C6</td><td class="c4">D6</td><td class="c5">E6</td><td class="c6">F6</td></tr>
              <tr><td class="c1">A7</td><td class="c2">B7</td><td class="c3">C7</td><td class="c4">D7</td><td class="c5">E7</td><td class="c6">F7</td></tr>
              <tr><td class="c1">A8</td><td class="c2">B8</td><td class="c3">C8</td><td class="c4">D8</td><td class="c5">E8</td><td class="c6">F8</td></tr>
              <tr><td class="c1">A9</td><td class="c2">B9</td><td class="c3">C9</td><td class="c4">D9</td><td class="c5">E9</td><td class="c6">F9</td></tr>
            </table>
          </div>
        </td>
      </tr>
    </table>

  <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    var content = $("#contentScroll");
    var headers = $("#colScroll");
    var rows = $("#rowScroll");
    content.scroll(function () {
      headers.scrollLeft(content.scrollLeft());
      rows.scrollTop(content.scrollTop());
    });
  </script>
</body>
</html>

Ответ 4

Попробуйте мое решение, оно не содержит ошибок и оптимизировано для производительности (не жертвуя функциональностью):

http://code.google.com/p/js-scroll-table-header/

Если вы попробуете его и вам нужна помощь, просто спросите, я автор.

Ответ 5

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

Одно из решений, которое мне нравится, это одно, но вам нужно определить ширину для каждого столбца. & raquo; Исправлены заголовки в больших таблицах HTML в Проект кода.

Если вы не хотите использовать JavaScript, возможно, вы можете установить фиксированные ширины столбцов с помощью PHP. Я бы определил среднюю длину строки ячеек, чтобы получить ширину столбца:

column_width = column_average / (all_cells_average * column_count) * table_width

Ответ 6

Это слишком много кода, чтобы вставлять его здесь напрямую, но то, к чему это сводится, - это, как минимум, для этого вам понадобится какой-то мощный CSS. Использование javascript и jQuery может облегчить это, поэтому я включу ссылки на оба метода.

Только HTML + CSS

Вы можете использовать источник на эту страницу, чтобы скопировать пример того, как вы можете делать именно то, что вы просите через CSS и HTML, Сообщается, что он работает практически во всех текущих браузерах (Opera 7.x + (All Platforms), Mozilla 1.x + (All Platforms), IE 6.x + (Windows), Safari 1.x + (MacOS), Konqueror 3.x + (Linux / BSD)), но если вам нужно вернуться в IE 5.x, он начнет сбой.

Javascript/JQuery

Если вы решите, что вы открыты для включения Javascript и jQuery, есть второй вариант, который выглядит несколько проще: эта статья в блоге показывает, как.

Ответ 7

Вы можете использовать DataTables без JavaScript. У него не будет сортировки, но таблица, заголовки и divs, которые их размещают, будут работать. Просто посмотрите на источник страницы - у него есть 3 divs каждый со столом с одинаковой шириной в thead. Верх и низ просто предоставляют верхний и нижний колонтитулы, а один в середине предоставляет данные. Это на самом деле довольно близко к вашей первоначальной идее, что вам нужно выпить эти части.