Таблица - фиксированный заголовок, прокручиваемое тело, самое надежное / простое решение? [Дубликат]
Вот метод расширения, который я создал с помощью простого регулярного выражения, чтобы удалить теги HTML из строки:
/// <summary>
/// Converts an Html string to plain text, and replaces all br tags with line breaks.
/// </summary>
/// <returns></returns>
/// <remarks></remarks>
[Extension()]
public string ToPlainText(string s)
{
s = s.Replace("<br>", Constants.vbCrLf);
s = s.Replace("<br />", Constants.vbCrLf);
s = s.Replace("<br/>", Constants.vbCrLf);
s = Regex.Replace(s, "<[^>]*>", string.Empty);
return s;
}
Надеюсь, что это поможет.
5 ответов
<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 320px;">
<table style="width: 300px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>
Это создает фиксированный заголовок столбца с прокручиваемой таблицей под ним. Хитрость заключается в том, чтобы встроить таблицу, которую вы хотите прокрутить, в тег с атрибутом переполнения, установленным на auto. Это заставит браузер отображать полосу прокрутки, когда содержимое внутренней таблицы больше, чем высота окружающей.
Ширина внешней должна быть больше, чем ширина, если внутренняя таблица приспособлена для полосы прокрутки. Это может быть трудно сделать точно, потому что некоторые пользователи могут установить свои полосы прокрутки шире или меньше, чем по умолчанию. Однако с разницей примерно от 20 до 30 пикселей вы, как правило, сможете отобразить полосу прокрутки нормально.
CSS-Tricks также говорит об использовании JavaScript и CSS, чтобы помочь с этим, так что вы можете использовать выделение.
Если вы можете исправить ширину столбцов - это намного проще. Если вы хотите, чтобы браузер определял ширину, это становится намного сложнее. По сути, у вас есть таблица в div, которая прокручивается (высота, переполнение: авто) и имеет этот div внутри position: relative div. Во внешнем div укажите другую позицию div: absolute, overflow: hidden, height: независимо от высоты заголовка, установите innerHTML этого div на innerHTML внутреннего div; Вот страница, которая демонстрирует. Есть много ошибок, но это выполнимо ...
<html>
<head></head>
<body onload="doit();">
<div id="outer" style="position:relative;">
<div id="inner" style="height:100px; overflow:auto;">
<script>
var html = '<table><tr><th>Heading 1</th><th>Heading 2</th></tr>';
var width = Math.floor(Math.random() * 100);
var d = '';
for(var i = 0; i < width; i++){d += 'a';}
for(var i = 0; i < 100; i++){
html += '<tr><td>' + d + '</td><td>some more data</td>';
}
html += '</table>';
document.write(html);
</script>
</div>
<div id="secondWrapper" style="position:absolute; background:#fff; left:0; top:0; height:25px; overflow:hidden;"></div>
</div>
<script>
function doit(){
var inner = document.getElementById('inner');
var secondWrapper = document.getElementById('secondWrapper');
secondWrapper.innerHTML = inner.innerHTML;
}
</script>
</body>
</html>
Обратите внимание, что при обновлении и изменении размера данных заголовок полностью совпадает. Это настоящая уловка.
Я считаю, что решение состоит в том, чтобы установить явную высоту для тела и установить переполнение в авто или прокрутку. К сожалению, как вы обнаружили, таблицы и CSS - сложная комбинация, и IE любит подавиться ею.
Также на Sitepoint был проведен тест на подобные вещи для тех, кто ищет решение, отличное от JS. Однако я обнаружил, что нижний колонтитул таблицы был необходим для предотвращения сворачивания ширины заголовков таблиц, ЕСЛИ содержимое ячеек было недостаточно широким. В итоге я прятал tfoot в приложении, в котором я его использовал.
Это чистый HTML / CSS и работает в IE6 и современных браузерах. Однако есть некоторые ограничения стиля для заголовка.
Я только что собрал плагин jQuery, который делает именно то, что вы хотите. Он очень мал по размеру и очень прост в реализации.
Все, что требуется, это таблица с тегами thead и tbody.
Вы можете заключить эту таблицу в DIV с именем класса, и таблица всегда будет изменять размер, чтобы соответствовать в этом div. так, например, если ваш div масштабируется вместе с окном браузера, таблица тоже. Заголовок будет фиксироваться при прокрутке. Нижний колонтитул будет исправлен (если вы включите нижний колонтитул). У вас также есть возможность клонировать верхний колонтитул в нижний колонтитул и исправить его. Кроме того, если вы сделаете окно браузера слишком маленьким и все столбцы не поместятся ... оно также будет прокручиваться по горизонтали (также заголовок).
Этот плагин позволяет браузеру изменять размер столбцов, чтобы они не были столбцами фиксированной ширины.
вы просто проходите DIV ' s имя класса для плагина: $ ('. myDiv'). fixedHeaderTable ({footer: true, footerId: 'myFooterId'}); а плагин сделает все остальное. FooterID - это элемент на странице, который содержит разметку для вашего нижнего колонтитула. это используется, если вы хотите иметь разбивку на страницы в качестве нижнего колонтитула.
Если у вас есть несколько таблиц на странице, это также будет работать для каждой таблицы, у которой вы хотите иметь фиксированный заголовок.
проверьте это здесь: http://fixedheadertable.mmalek.com/
Помните, что это все еще «бета», поэтому я ежедневно добавляю новые функции и исправления ошибок.
Поддерживаемые браузеры: IE6, IE7, IE8, FireFox, Safari и Chrome
Вот ссылка на мой ответ другому человеку, у которого был такой же вопрос: Заголовок замороженной таблицы внутри прокручиваемого блока