HTML зафиксировал полосу прокрутки таблицы заголовка [дубликат]
6 ответов
Все, что я нашел, требуют фиксированных значений для ширины и высоты ячеек, поэтому, если вы хотите, чтобы все было динамично, вам придется использовать JavaScript.
Мне нравится вот это решение, но вам нужно определить ширину для каждого столбца. " Исправление заголовков в больших HTML-таблицах на The Code Project.
Если вы не хотите использовать JavaScript, возможно, вы сможете установить фиксированную ширину столбцов с помощью PHP. Я бы определил среднюю длину строки в ячейках, чтобы получить ширину столбцов:
column_width = column_average / (all_cells_average * column_count) * table_width
В моем первом ответе не было попытки исправить оба заголовка и столбца. Вот пример, который должен работать во всех типичных браузерах (но может потребоваться некоторая доработка).
<!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>
Это слишком много кода, чтобы вводить здесь напрямую, но все сводится к тому, что, как минимум, для этого вам понадобится здоровенный CSS. Использование javascript и jQuery может облегчить это, поэтому я включу ссылки на оба метода.
Только HTML + CSS
Вы можете использовать исходный текст на этой странице , чтобы скопировать пример того, как вы можете делать именно то, что вы просите, с помощью CSS и HTML. Сообщается, что это работает практически во всех текущих браузерах ( Opera 7.x + (Все платформы), Mozilla 1.x + (Все платформы), IE 6.x + (Windows), Safari 1.x + ( MacOS), Konqueror 3.x + (Linux / BSD) ), но если вам нужно вернуться к IE 5.x, он начнет давать сбой.
Javascript / jQuery
Если вы решите, что готовы включить Javascript и jQuery, есть второй вариант, который выглядит немного проще для реализации: эта статья в блоге показывает, как это сделать.
Я знаю, что вы пытаетесь избежать использования Javascript, но я был в той же лодке, что и вы (в течение нескольких дней боролся с тем, что делать, решая конкретную задачу для нового приложения), и решил проблема примерно через 10 минут после того, как я нашел Datatables:
Рабочий пример решения: http://www.datatables.net/examples/basic_init/scroll_y.html
Он ТОЧНО соответствует ширине столбцов заголовка и тела - мудро каждый раз. Ширину можно указать, но она также достаточно интеллектуальна для автоматического изменения размера. Выделение и сортировка столбцов поддерживается по умолчанию с использованием предоставленного образца CSS. Переключение на модель с разбивкой на страницы (то, что я в итоге использовал) - это одна строка кода. И ... лучшая часть - если вы обеспокоены тем, что у вашего пользователя может не быть включен Javascript, он полностью возвращается к совместимым со стандартами таблицам HTML. ИМХО, это наименее болезненное и наиболее многофункциональное решение, которое полностью поддерживает IE.
Если вам от этого станет легче, я использовал это решение как на правительственном (военном) сайте, так и на веб-сайтах международного банка ... как для самых требовательных, так и для самых строгих клиентов, с которыми я когда-либо сталкивался ... и оба были очень довольны результатами.
Попробуйте мое решение, оно без ошибок и оптимизирован для производительности (без ущерба для функциональности):
http://code.google.com/p/js-scroll-table-header/
Если вы попробуете это и вам понадобится помощь, просто спросите, я Автор.
Вы можете использовать DataTables без JavaScript. У него не будет сортировки, но таблица, заголовки и div, в которых они размещены, будут работать. Достаточно взглянуть на исходный код страницы - в каждом есть 3 блока с таблицей одинаковой ширины в thead. Верхний и нижний только верхний и нижний колонтитулы, а тот, что посередине, предоставляет данные. На самом деле это довольно близко к вашей первоначальной идее, что вам нужно разделить эти части.