Несколько дизайнов thead/tbody
У меня есть вопрос об удобстве использования/дизайне. Я в настоящее время использую некоторый JQuery для скрытий/показывания всех областей. В настоящее время они - все в одной большой таблице с thead на самой вершине как основной заголовок, сопровождаемый вторым thead, который является заголовком того, что было бы отображено. Затем другой thead, который является заголовком того, что скрыто, который отображен в tbody. Я знаю, что это - ужасный стиль однако проблема, которую я пытаюсь преодолеть, я хочу, чтобы все строки совпали с, они все отображают тот же тип данных.
Пример кода
Country
Population
Area
Official languages
United States of America
306,939,000
9,826,630 km2
English
First Row
Second Row
Third Row
Fourth Row
Fifth Row
Additional information
some other stuff
Ниже то, что было бы отображено: сопроводительный текст http://img694.imageshack.us/img694/9773/screenshot20100708at100.png сопроводительный текст http://img822.imageshack.us/img822/9206/screenshot20100708at101.png
Теперь причина, я на самом деле сделал это этим путем, то, потому что обычно у меня будет 4 строки для фактического визуализуемого заголовка (этим примером являются данные страны), и только 3 столбца от скрытого заголовка (первая строка, вторая и т.д.). Эти данные внутри имеют 1 строку, URL, который может быть где угодно от 10 символов до 100 + (100 +, распространено), который приводит ко всему изменению дисплея и моим заголовкам, становящимся 2 или 3 строками. В то время как то, что я хотел, было, чтобы все строки остались такими же, там любой способ связать только 1 tbody с 1 thead в таблице так, чтобы это не производило других. Так как это, вероятно, довольно сбивает с толку, там лучший способ на самом деле иметь несколько таблиц, но thead's каждого остается таким же, неважно, данные, вставленные для tbody. Я знаю, что будут вопросы, но любая справка значительно ценилась бы и отметила бы, что я абсолютно открыт для выполнения этого другой путь. Однако то, что требуется, - то, что данные могут быть скрыты, который таблица и будет иметь заголовок для той информации. Может быть визуализуемый раздел, который не должен соответствовать (это могло быть отделение), и данные в каждом разделе должны сохранить тот же формат.
PS: Если заинтересовано ниже JQuery, который я использую для этой всей вещи.
2 ответа
Несколько Есть ли способ связать только 1 tbody с 1 thead внутри таблицы так, чтобы это не повлияло на другие. Да, используйте отдельную таблицу. Если вы хотите, чтобы ширина столбцов была статичной по всей длине, чтобы таблицы выравнивались друг с другом, установите стили (Хорошей идеей является использование обычно у меня будет 4 ряда для
фактический отображаемый заголовок (это
пример - данные по стране) и только
3 столбца из заголовка скрываются
(первый ряд, второй и т. д.). Тема То, что вы пометили «Первая строка, вторая строка ...», является столбцами, а не строками. Похоже, вы пытаетесь скрыть все строки после первой. Ваша таблица должна выглядеть так: И вы можете скрыть все строки после первой примерно так (при условии, что они начинаются скрытыми): Если у вас есть несколько скрываемых последовательно секций в одной таблице, используйте , где У этих данных внутри 1 строка - это URL.
это может быть от 10
символов до 100+ (обычно 100+)
что приводит к отображению всего
меняется, и мои заголовки становятся 2 или
3 строки. Я не понимаю, о чем вы здесь говорите, но похоже, что это можно решить, управляя размерами таблицы в вашей таблице стилей, как предлагает Бобинс. в таблице - это некорректный HTML. Большинство строк в s содержат данные, а не заголовки, поэтому должны быть в .
table-layout: fixed; width: 100% для каждой таблицы и установите стили width для каждой ячейки в первой строке (или, лучше table-layout: fixed везде, где это возможно, так как это быстрее для рендеринга и намного более предсказуемо, чем алгоритм автоматического расположения таблицы, особенно в IE, который имеет немного запутанную реализацию, особенно когда вы используете colspan)
должна включать только фактические заголовки, то есть «Страна - население - Область - Официальные языки». Остальное - это данные и принадлежит телу. <table id="report">
<thead>
<tr id="header">
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
<td id="tableToggle"><div class="arrow"></div></td>
</tr>
<tr>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
<td>Fourth Row</td>
<td>Fifth Row</td>
</tr>
<tr>
<td colspan="5">
<img src="../125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
<li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
<li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
</ul>
</td>
</tr>
<tr>
<td>some other stuff</td>
</tr>
</tbody>
</table>
$('#tableToggle').toggle(
function() {
$(this).nextAll().show();
},
function() {
$(this).nextAll().hide();
});
$(this).nextAll().slice(0, n).show();
n - количество строк в разделе. Или вы можете просто использовать новую таблицу для каждого скрываемого раздела.
Похожие вопросы: