Colspan все столбцы
Как я могу указать, что тег td должен охватывать все столбцы (когда точное количество столбцов в таблице будет переменным / трудно определить при визуализации HTML)? w3schools упоминает, что вы можете использовать colspan = "0", но не говорит точно, какие браузеры поддерживают это значение (IE 6 находится в нашем списке для поддержки).
Похоже, что установка colspan на значение, превышающее теоретическое количество столбцов, которое у вас может быть, будет работать, но не будет работать, если для table-layout установлено значение fixed. Есть ли недостатки в использовании автоматической раскладки с большим номером для colspan? Есть ли более правильный способ сделать это?
Отличный вопрос, но вы должны просто не принимать ни одного ответа, если ни один из них не является правильным.
Ответы 14
Для IE 6 вам нужно, чтобы colspan равнялся количеству столбцов в вашей таблице. Если у вас 5 столбцов, вам понадобится: colspan = "5".
Причина в том, что IE обрабатывает colspans, по-другому, использует спецификацию HTML 3.2:
IE implements the HTML 3.2 definition, it sets
colspan=0ascolspan=1.
Ошибка - хорошо задокументированы.
Количество столбцов может быть различным, я обновлю свой вопрос, чтобы включить это замечание.
Хотя совет в верхнем абзаце кажется разумным, я думаю, что многие детали здесь не совсем правильны. Спецификация HTML 3.2 говорит, что colspan должны быть целыми числами положительный, что делает colspan=0 незаконным; нигде не говорится, что colspan=0 должен обрабатываться как colspan=1 (хотя я уверен, что IE 6 именно так и делает). Кроме того, цитата нет (больше?) На странице форума, на которую вы ссылаетесь, и большинство результатов поиска Google (сейчас?) Полностью посвящены ошибкам, связанным с разные IE 6 colspan.
У меня IE 7.0, Firefox 3.0 и Chrome 1.0
Атрибут colspan = "0" в TD равен НЕ охватывающий для всех TD в любой из вышеперечисленных браузеров.
Возможно, это не рекомендуется в качестве правильной практики разметки, но если вы зададите значение colspan больше, чем общее возможное количество. столбцов в других строках, тогда TD охватит все столбцы.
Это НЕ работает, если для свойства CSS table-layout установлено значение fixed.
Опять же, это не идеальное решение, но, похоже, оно работает в трех вышеупомянутых версиях браузера, когда свойство CSS table-layout имеет значение автоматический. Надеюсь это поможет.
Если вы укажете строгий тип документа в самом начале html, Firefox 3 отобразит colspan в соответствии со спецификациями html 4.01.
Я фанат colspan = "42", который охватывает весь диапазон. Очевидно, это проблема для> 42 столбцов, но это одно из немногих магических чисел, которые я одобряю.
Я настоятельно рекомендую вам поставить colspan = <точное правильное число>. Я только что столкнулся с огромной ошибкой производительности в Firefox, на выяснение которой у меня ушел целый день. Произвольно большой colspan заставит FF подавиться на большом столе с помощью border-collapse: collapse. Моя таблица с 800 строками и 8 столбцами отображалась за 5 секунд. При правильном colspan время возвращается к разумной 1 секунде. bugzilla.mozilla.org/show_bug.cgi?id=675417
Я рекомендую не использовать этот метод. Только что получил очень странный результат от Chrome на OSX (столбцы перекрывают друг друга).
еще одна проблема, обнаруженная в Chrome: если вы попытаетесь задать границу элементу TR, содержащему TD "слишком большого размера", правая граница не будет видна.
Подход не работает на Chrome v54. Уменьшает масштаб столбцов, чтобы они казались очень узкими слева.
Использование больших чисел может испортить CSS, например свойство border-right. Я предполагаю, что граница пытается заканчиваться на самом дальнем столбце, даже если он не используется и просто colspan.
Те браузеры, о которых вы говорите, отстают почти на ШЕСТЬ версий. Firefox имеет версию 62, а Chrome - версию 69. На некоторых клиентских базах могут быть старые браузеры, но не думаю, что большинству сайтов нужно обслуживать машины, которые каким-то образом отключили обновления своих браузеров и оставили это так на ДЕСЯТЬ ЛЕТ. Этому ответу тоже десять лет, но, к сожалению, вопрос, на который он отвечает, все еще актуален.
Установка для colspan значения, превышающего фактический номер столбца, также нарушит работу программ чтения с экрана, поскольку они объявят colspan, а не фактическое количество столбцов.
Может, я прямолинейный мыслитель, но немного озадачен, разве вы не знаете номер столбца в своей таблице?
Кстати, IE6 не соблюдает colspan = "0", с определенной группой colgroup или без нее. Я также пытался использовать thead и th для создания групп столбцов, но браузер не распознает форму colspan = "0".
Я пробовал использовать Firefox 3.0 в Windows и Linux, и он работает только со строгим типом документа.
Проверить тест на нескольких баузерах можно на
http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html
Я нашел здесь тестовую страницу http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html
Обновлено: скопируйте и вставьте ссылку, форматирование не примет части двойного протокола в ссылке (или я не настолько умен, чтобы правильно ее отформатировать).
Я согласен с первой частью: конечно, вы могли бы вычислить, сколько ячеек у вас будет в ряду? Как еще вы могли бы его создать?
Не обязательно, у меня есть приложение с динамически сгенерированной таблицей AJAX, и количество столбцов может меняться от обратного вызова к обратному вызову. Кроме того, при разработке вы можете «знать» количество столбцов, но это может измениться, и вы просто знать пропустите один из них.
Кроме того, если вы добавите столбцы позже, вы можете забыть изменить colspan, лучше, чтобы он всегда был максимальным.
попробуйте использовать colSpan вместо colspan. IE нравится версия camelBack ...
только при использовании IE и настройке через JavaScript и .setAttribute ('colSpan', int); Обратите внимание, что это было исправлено в IE8 (только в режиме stds).
+1 - Я этого не знал, и это очень помогло! Я не думал, что colSpan вообще работает в IE6.
Если вы хотите сделать ячейку «заголовок», охватывающую все столбцы, в качестве заголовка для вашей таблицы, вы можете использовать тег заголовка (http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption). Этот элемент предназначен для этой цели. Он ведет себя как div, но не охватывает всю ширину родительского элемента таблицы (как div в той же позиции (не пытайтесь делать это дома!)), Вместо этого он охватывает ширину Таблица. Есть некоторые кроссбраузерные проблемы с границами и тому подобное (было приемлемо для меня). В любом случае, вы можете сделать так, чтобы он выглядел как ячейка, охватывающая все столбцы. Внутри вы можете создавать строки, добавляя div-элементы. Я не уверен, можно ли вставить его между tr-элементами, но я думаю, это будет хак (поэтому не рекомендуется). Другой вариант - возиться с плавающими div, но это фу!
Делать
<table>
<caption style = "gimme some style!"><!-- Title of table --></caption>
<thead><!-- ... --></thead>
<tbody><!-- ... --></tbody>
</table>
Не надо
<div>
<div style = "float: left;/* extra styling /*"><!-- Title of table --></div>
<table>
<thead><!-- ... --></thead>
<tbody><!-- ... --></tbody>
</table>
<div style = "clear: both"></div>
</div>
Именно то, что я искал, - разместить элементы управления разбивкой на страницы в нижней части таблицы данных. Работает отлично. Большое спасибо.
Это не сработает, если вы хотите охватить все столбцы в середине таблицы ... например, сгруппировать по разделителю между связанными группами строк. (Хром)
Другое рабочее, но уродливое решение: colspan = "100", где 100 - это значение больше, чем общее количество столбцов, необходимое для colspan.
Согласно W3C, опция colspan = "0" действительна только с тегом COLGROUP.
colspan = "100" (например, сверх предела) в некоторых случаях может вызывать очень странную визуализацию таблицы (я попытаюсь найти некоторые тестовые примеры и опубликовать URL-адреса)
-1 потому что, насколько я могу судить, утверждение в последнем абзаце является ложным. HTML 4 позволяет <td> иметь colspan = "0" (см. w3.org/TR/REC-html40/struct/tables.html#adef-colspan), тогда как HTML 5.0 не разрешает span = "0" на colgroup (см. w3.org/TR/html50/tabular-data.html#attr-colgroup-span, где указано, что "значение атрибута [значений] содержимого диапазона должно быть действительным неотрицательным целым числом больше нуля".).
Просто используйте это:
colspan = "100%"
Он работает в Firefox 3.6, IE 7 и Opera 11! (и я думаю, что на других я не мог попробовать)
Предупреждение: как указано в комментариях ниже это фактически то же самое, что и colspan = "100". Следовательно, это решение не работает для таблиц с css table-layout: fixed или более 100 столбцов.
Протестировано [дополнительно] в IE6 - IE8, Chrome [на ПК и Mac], Firefox 4.0 [ПК и Mac], Safari 5 [ПК и Mac]
Как это до сих пор так неясно? Это надо кричать на каждом углу !!! Я уже довольно давно боролся с этой проклятой проблемой colspan в разное время
В chrome и firefox colspan = "3%" обрабатывается так же, как colspan = "3".
@zpmorgan, поэтому мы должны предположить, что 100% - это то же самое, что и 100, и, следовательно, работает правильно только из-за ответа выше?
@zpmorgan и @Sprog, вы правы! colspan = "100%" означает именно colspan = "100".
Лол, я был очень рад, наконец, увидеть последовательное кросс-браузерное решение этой проблемы, только чтобы через комментарии обнаружил, что это действительно обманчивый, не работающий так, как ожидалось :( Я думаю, он не заслуживает большего количества голосов чем принятый ответ = /
@Francisco, однако, 100% семантически более правильно, поэтому механизм, с помощью которого он работает, возможно, не так важен? Если, конечно, у вас есть таблица с> 100 столбцами (ой).
В хроме при установке colspan = '100%' я теряю правую границу таблицы
Как сказал Ому, это может вызвать проблемы с границами таблицы, особенно когда задействовано пространство ячеек. Так что, если вы разборчивы в своих таблицах (Oh My! Tables ...), то это решение не работает.
Я использовал этот подход и никогда не знал, что это означает 100 столбцов и что% фактически игнорируется. Я думаю, было бы здорово, если бы браузеры действительно реализовали это, поэтому я буду придерживаться 100%. Плюс, я думаю, что если у вас таблица с более чем 100 столбцами, то у вас на руках другая проблема :)
@JonathanDay: Это совсем не семантически более корректно, это семантически абсолютно вводит в заблуждение. Это означает нечто совершенно иное, чем то, на что похоже. Это в значительной степени запутывание того, что происходит, и то, что это работает в ситуациях некоторый (только для table-layout: automatic), не делает его лучше.
@jamiebarrow Думаю, вы правы. Если вы запустите эту конструкцию и валидатор HTML5, он сообщит о наличии символа «%» как об ошибке. Спецификация кажется довольно ясной, что ее там не должно быть: w3.org/html/wg/drafts/html/master/…
Это не работает при использовании границ в таблице + td, установка 100% показывает пустое пространство справа от последнего столбца, удаляя границу.
Работает на Chrome версии 77.0.3865.90!
@GustavoAmaro: Начиная с Chrome v78.0.3904.108, он все еще работает только для 100 столбцов (как уже говорилось в других комментариях)
конечно, он работает только для 100 столбцов, он просто интерпретирует его как 100. Если вам нужно больше столбцов, просто используйте большее число. и не беспокойтесь о знаке процента.
Просто хочу добавить свой опыт и ответить на это.
Примечание. Это работает только тогда, когда у вас есть предопределенные table и tr с th, но они загружаются в ваши строки (например, через AJAX) динамически.
В этом случае вы можете подсчитать количество th в вашей первой строке заголовка и использовать это для охвата всего столбца.
Это может понадобиться, если вы хотите передать сообщение, когда результаты не найдены.
Что-то вроде этого в jQuery, где table - ваша таблица ввода:
var trs = $(table).find("tr");
var numberColumns = 999;
if (trs.length === 1) {
//Assume having one row means that there is a header
var headerColumns = $(trs).find("th").length;
if (headerColumns > 0) {
numberColumns = headerColumns;
}
}
Как и решение JavaScript, опубликованное до этого, это плохо обобщается; количество th не обязательно количество столбцов, так как некоторые из них могут иметь набор colspan, и поэтому это не будет работать так, как написано для всех.
Если вы используете jQuery (или не возражаете против его добавления), это сделает работу лучше, чем любой из этих приемов.
function getMaxColCount($table) {
var maxCol = 0;
$table.find('tr').each(function(i,o) {
var colCount = 0;
$(o).find('td:not(.maxcols),th:not(.maxcols)').each(function(i,oo) {
var cc = Number($(oo).attr('colspan'));
if (cc) {
colCount += cc;
} else {
colCount += 1;
}
});
if (colCount > maxCol) { maxCol = colCount };
});
return maxCol;
}
Чтобы упростить реализацию, я декорирую любые td / th, которые мне нужно отрегулировать, с помощью класса, такого как "maxCol", после чего я могу сделать следующее:
$('td.maxcols, th.maxcols').each(function(i,o) {
$t = $($(o).parents('table')[0]); $(o).attr('colspan', getMaxColCount($t));
});
Если вы найдете реализацию, для которой это не сработает, не отказывайтесь от ответа, объясните в комментариях, и я обновлю, если это возможно.
Было бы здорово, если бы у вас была ванильная версия JS
У вас есть общий вариант использования, в котором отсутствует поддержка $ (selector), или вы просто не хотите его использовать?
Ни один. Мне просто интересно, добавляет ли здесь jQuery какую-либо пользу; это довольно серьезная предпосылка, и, похоже, она используется здесь минимально.
Справедливо. Между jQuery и Angular у меня редко бывают эти инструменты, поэтому я использую их по умолчанию. Но пока я оставлю это кому-нибудь другому, чтобы он мог придумать ванильную версию.
Поскольку jQuery несколько устарел, я добавил версию / ответ es6 (не хотел обновлять этот ответ совершенно другим кодом).
Если я правильно понимаю код, он вычислит getMaxColCount () для каждой ячейки в таблице. это не очень эффективно ...
Согласно спецификации colspan = "0" должен приводить к ширине таблицы td.
Однако это верно только в том случае, если ваша таблица имеет ширину! Таблица может содержать строки разной ширины. Итак, единственный случай, когда рендерер знает ширину таблицы, если вы определить группу! В противном случае результат colspan = "0" невозможно определить ...
http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan
Я не могу протестировать его в старых браузерах, но это часть спецификации начиная с 4.0 ...
colspan 0 было признано незаконным. И w3.org/TR/html50/… (спецификация HTML 5.0), и html.spec.whatwg.org/multipage/… (последняя версия WhatWG HTML Living Standard) заявляют, что colspan должен быть больше нуля. И, как отмечено в других ответах здесь, браузеры никогда не реализовывали старое поведение HTML 4, которое вы цитируете.
В качестве частичного ответа, вот несколько моментов о colspan = "0", которые упоминались в вопросе.
tl; dr версия:
colspan = "0" не работает ни в одном браузере. W3Schools ошибается (как обычно). HTML 4 сказал, что colspan = "0" должен заставлять столбец охватывать всю таблицу, но никто не реализовал это, и он был удален из спецификации после HTML 4.
Еще немного подробностей и доказательств:
Все основные браузеры рассматривают его как эквивалент
colspan = "1".Вот демонстрация, показывающая это; попробуйте в любом браузере, который вам нравится.
td { border: 1px solid black; }<table> <tr> <td>ay</td> <td>bee</td> <td>see</td> </tr> <tr> <td colspan = "0">colspan = "0"</td> </tr> <tr> <td colspan = "1">colspan = "1"</td> </tr> <tr> <td colspan = "3">colspan = "3"</td> </tr> <tr> <td colspan = "1000">colspan = "1000"</td> </tr> </table>Спецификация HTML 4 (теперь старая и устаревшая, но актуальная еще на тот момент, когда был задан этот вопрос) сделал действительно говорит, что
colspan = "0"следует рассматривать как охватывающий все столбцы:The value zero ("0") means that the cell spans all columns from the current column to the last column of the column group (COLGROUP) in which the cell is defined.
Однако в большинстве браузеров это не реализовано.
HTML 5.0 (был рекомендован кандидатом еще в 2012 году), жизненный стандарт WhatWG HTML (доминирующий стандарт сегодня) и последняя спецификация W3 HTML 5 - все они не содержат формулировки, цитируемые из HTML 4 выше, и единогласно согласны с тем, что
colspanиз 0 не допускается, с этой формулировкой, которая присутствует во всех трех спецификациях:The
tdandthelements may have acolspancontent attribute specified, whose value must be a valid non-negative integer greater than zero ...Источники:
Следующие утверждения от страница W3Schools, на которую ссылается вопрос - по крайней мере в настоящее время - полностью ложны:
Only Firefox supports colspan = "0", which has a special meaning ... [It] tells the browser to span the cell to the last column of the column group (colgroup)
а также
Differences Between HTML 4.01 and HTML5
NONE.
Если вы еще не знаете, что веб-разработчики обычно презирают W3Schools за его частые неточности, рассмотрите этот урок, чтобы понять, почему.
Ха-ха, мне нравится, как полезные функции API просто полностью удаляются, когда никто не пытается их реализовать. Потрясающий процесс.
Ниже представлено краткое решение es6 (похожее на Ответ Rainbabba, но без jQuery).
Array.from(document.querySelectorAll('[data-colspan-max]')).forEach(td => {
let table = td;
while (table && table.nodeName !== 'TABLE') table = table.parentNode;
td.colSpan = Array.from(table.querySelector('tr').children).reduce((acc, child) => acc + child.colSpan, 0);
});html {
font-family: Verdana;
}
tr > * {
padding: 1rem;
box-shadow: 0 0 8px gray inset;
}<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
</tr>
</thead>
<tbod><tr>
<td data-colspan-max>td will be set to full width</td>
</tr></tbod>
</table>используйте colspan = "100%" в ячейке таблицы, и он работает нормально.
colspan = "100%"Этот ответ уже дан здесь stackoverflow.com/a/5028091/6127393 и в настоящее время является наиболее популярным ответом на этот вопрос, которому уже 9 лет. Также сниппеты предназначены для полных рабочих примеров, а не для недопустимых фрагментов кода.
Решение CSS было бы идеальным, но я не смог его найти, поэтому вот решение JavaScript: для элемента tr с заданным классом разверните его, выбрав полную строку, подсчитав элементы td и их атрибуты colSpan, и просто установка расширенного ряда с помощью el.colSpan = newcolspan;. Вот так...
var headertablerows = document.getElementsByClassName('max-col-span');
[].forEach.call(headertablerows, function (headertablerow) {
var colspan = 0;
[].forEach.call(headertablerow.nextElementSibling.children, function (child) {
colspan += child.colSpan ? parseInt(child.colSpan, 10) : 1;
});
headertablerow.children[0].colSpan = colspan;
});html {
font-family: Verdana;
}
tr > * {
padding: 1rem;
box-shadow: 0 0 8px gray inset;
} <table>
<tr class = "max-col-span">
<td>1 - max width
</td>
</tr>
<tr>
<td>2 - no colspan
</td>
<td colspan = "2">3 - colspan is 2
</td>
</tr>
</table>Возможно, вам придется отрегулировать это, если вы используете таблицу headers, но это должно дать доказательный подход, который использует 100% чистый JavaScript.
Принятый ответ заключается в том, как НЕ делать этого, и, похоже, он имеет серьезные недостатки в производительности / согласованности. Думаю, ответ таков: жестко запрограммируйте количество столбцов. Я не вижу жизнеспособной альтернативы.