Развернуть все столбцы

385

Как я могу указать, что tdтег должен охватывать все столбцы (когда точное количество столбцов в таблице будет переменным / трудно определить, когда отображается HTML)? w3schools упоминает, что вы можете использовать colspan="0", но в нем точно не указано, какие браузеры поддерживают это значение (IE 6 есть в нашем списке для поддержки).

Похоже, что установка colspanзначения, превышающего теоретическое количество столбцов, которое вы можете иметь, будет работать, но это не будет работать, если вы table-layoutустановили fixed. Есть ли недостатки в использовании автоматической раскладки с большим номером для colspan? Есть ли более правильный способ сделать это?

боб
источник
Принятый ответ о том, как НЕ делать этого, и, похоже, имеет серьезные недостатки производительности / согласованности. Поэтому я думаю, что ответ: жестко закодировать количество столбцов. Я не вижу жизнеспособной альтернативы.
Эндрю Костер

Ответы:

268

У меня IE 7.0, Firefox 3.0 и Chrome 1.0

Атрибут colspan = "0" в TD не распространяется на все TD в любом из вышеперечисленных браузеров .

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

Это НЕ работает, когда свойство CSS макета таблицы установлено на фиксированное значение.

Еще раз, это не идеальное решение, но, похоже, работает в вышеупомянутых 3 версиях браузера, когда свойство CSS макета таблицы является автоматическим . Надеюсь это поможет.

Нахом Тихнам
источник
Если вы укажете строгий тип документа в самом начале HTML-файла, Firefox 3 отобразит colspan в соответствии с требованиями спецификации HTML 4.01.
Эйнеки
253
Я фанат, colspan="42"чтобы охватить весь ассортимент. Очевидно, что это проблема для> 42 столбцов, но это одно из немногих волшебных чисел, которые я одобряю.
Мартин Карни
40
Я настоятельно рекомендую вам поставить colspan = <точное правильное число>. Я только что обнаружил огромную ошибку в Firefox, на которую у меня ушел целый день, чтобы понять. Произвольно большой colspan заставит FF задохнуться на большом столе с border-collapse: collapse. Моя таблица с 800 строками и 8 столбцами отрисовывалась за 5 секунд. С правильным colspan это возвращается к разумной 1 секунде. bugzilla.mozilla.org/show_bug.cgi?id=675417
InfinitiesLoop,
2
Я рекомендую не использовать этот метод. Только что получил очень странный результат от Chrome на OSX (столбцы перекрывают друг друга).
Цах
другая проблема, обнаруженная в Chrome, если вы попытаетесь задать границу для элемента TR, который содержит TD «oversize», правая граница не будет видна.
Массимо
272

Просто используйте это:

colspan="100%"

Работает на Firefox 3.6, IE 7 и Opera 11! (и я думаю, на других, я не мог попробовать)


Предупреждение: как уже упоминалось в комментариях ниже, это на самом деле то же самое, что и colspan="100". Следовательно, это решение сломается для таблиц с CSS table-layout: fixedили более 100 столбцов.

Cluxter
источник
16
Протестировано [дополнительно] в IE6 - IE8, Chrome [для ПК и Mac], Firefox 4.0 [для ПК и Mac], Safari 5 [для ПК и Mac]
hndcrftd
11
Как это все еще так малоизвестно? Это надо кричать на каждом углу !!! Я боролся с этой проклятой проблемой colspan в разное время уже довольно
давно
30
В chrome и firefox colspan = "3%" обрабатывается так же, как colspan = "3".
zpmorgan
98
@zpmorgan и @Sprog, вы правы! colspan="100%"значит точно colspan="100".
NemoStein
37
Lol, я был очень рад, наконец, увидеть последовательное кросс-браузерное решение этой проблемы, но только в комментариях обнаружил, что это обманчиво, а не работает, как ожидалось :( Я думаю, что это не заслуживает большего количества голосов чем принятый ответ = /
Франциско
64

Если вы хотите создать ячейку 'title', охватывающую все столбцы, в качестве заголовка для вашей таблицы, вы можете использовать тег заголовка ( 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>
natevw
источник
1
Именно то, что я искал, чтобы поместить элементы управления нумерацией страниц внизу таблицы данных. Работает отлично. Большое спасибо.
Коменкау
5
Это не работает, если вы хотите охватить все столбцы в середине таблицы, например, в качестве группы по разделителю между связанными группами строк. (Chrome)
Дэвид Хэмпи
17

В качестве частичного ответа, вот несколько моментов, о 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"следует рассматривать как охватывающий все столбцы:

    Нулевое значение («0») означает, что ячейка охватывает все столбцы от текущего столбца до последнего столбца группы столбцов (COLGROUP), в которой определена ячейка.

    Однако большинство браузеров никогда не реализовывали это.

  • HTML 5.0 (рекомендованный кандидатом еще в 2012 году), жизненный стандарт WhatWG HTML (доминирующий сегодня стандарт) и новейшая спецификация W3 HTML 5 не содержат формулировку, приведенную выше в HTML 4, и единодушно согласны с тем, что colspan of 0 не допускается, с этой формулировкой, которая появляется во всех трех спецификациях:

    У элементов tdand thможет быть colspanуказан атрибут содержимого, значение которого должно быть действительным неотрицательным целым числом, большим нуля ...

    Источники:

  • Следующие утверждения со страницы W3Schools, ссылки на которые есть в вопросе , - по крайней мере, в настоящее время - полностью ложны:

    Только Firefox поддерживает colspan = "0", что имеет особое значение ... [Он] говорит браузеру, чтобы охватить ячейку до последнего столбца группы столбцов (colgroup)

    а также

    Различия между HTML 4.01 и HTML5

    НИКТО.

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

Марк Эмери
источник
4
Хаха, мне нравится, как полезные функции API просто удаляются, когда никто не может их реализовать. Удивительный процесс.
Андрей Костер
14

Для IE 6 вы хотите, чтобы colspan равнялся количеству столбцов в вашей таблице. Если у вас есть 5 столбцов, то вам нужно:colspan="5" .

Причина в том, что IE обрабатывает colspans по- разному, он использует спецификацию HTML 3.2:

IE реализует определение HTML 3.2, он устанавливает colspan=0как colspan=1.

Ошибка хорошо документирована .

Джордж Стокер
источник
1
Количество столбцов может быть переменным, я обновлю свой вопрос, чтобы включить это замечание.
Боб
Хотя совет в верхнем абзаце кажется разумным, я думаю, что многие детали здесь не совсем верны. Спецификация HTML 3.2 говорит, что colspans должно быть положительным целым числом, что делает colspan=0недопустимым; нигде это явно не предписывает, что colspan=0должно обрабатываться как colspan=1(хотя я уверен, что это именно то, что делает IE 6). Кроме того, цитата (больше не?) Нигде на странице форума, на которую вы ссылаетесь, и большинство результатов поиска Google (сейчас?) Относятся к совершенно другим ошибкам, связанным с colspan в IE 6.
Марк Амери
11

Если вы используете 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));
});

Если вы найдете реализацию, для которой это не сработает, не хлопайте ответом, объясните в комментариях, и я обновлю информацию, если это будет возможно.

rainabba
источник
1
Было бы здорово, если бы у вас была ванильная версия JS
jpaugh
У вас есть общий вариант использования, в котором отсутствует поддержка $ (селектор), или вы просто не хотите его использовать?
Rainabba
1
Ни. Мне просто любопытно, добавляет ли jQuery какую-либо выгоду здесь; это довольно здоровенная предпосылка, и, похоже, она используется здесь минимально.
jpaugh
Справедливо. Между jQuery и Angular редко бывает, что у меня нет этих инструментов, поэтому я использую их по умолчанию. Я пока оставлю это кому-то еще, чтобы придумать ванильную версию.
Rainabba
1
Поскольку jQuery несколько устарел, я добавил версию / ответ es6 (не хотел обновлять этот ответ совершенно другим кодом).
Sjeiti
5

Другое рабочее, но уродливое решение: colspan="100"где 100 - это значение, превышающее общее количество столбцов, которое вам нужно colspan.

Согласно W3C, colspan="0"опция действительна только с COLGROUPтегом.

Raptor
источник
colspan = "100" (например, за лимитом) в некоторых случаях может вызвать очень странный рендеринг таблиц (я постараюсь найти некоторые тестовые примеры и опубликовать URL-адреса)
scunliffe
-1 потому что, насколько я могу судить, утверждение в последнем абзаце неверно. HTML 4 позволяет <td>S иметь 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, в котором говорится, что «значение атрибута содержимого span ['s] должно быть действительным неотрицательным целым числом, большим нуля." ).
Марк Амери
2

Ниже приведено краткое решение 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>

Sjeiti
источник
-1

Просто хочу добавить свой опыт и ответить на это.
Примечание. Это работает только в том случае, если у вас есть предопределенные символы tablea trс ths, но они загружаются в ваши строки (например, через 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;
    }
}
skiwi
источник
Как и решение JavaScript, опубликованное до этого , оно плохо обобщается; число ths не обязательно число столбцов, так как некоторые из них могут иметь colspanнабор, и поэтому это не будет работать так, как написано для всех.
Марк Амери
-2

Может быть, я просто мыслитель, но я немного озадачен, разве вы не знаете номер столбца вашей таблицы?

Кстати, IE6 не соблюдает colspan = "0", с определенной или без определенной группы. Я также попытался использовать thead и th для генерации групп столбцов, но браузер не распознает форму colspan = "0".

Я пробовал с Firefox 3.0 на Windows и Linux, и он работает только со строгим doctype.

Вы можете проверить тест на нескольких луков на

http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Я нашел тестовую страницу здесь http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Изменить: Пожалуйста, скопируйте и вставьте ссылку, форматирование не будет принимать двойные части протокола в ссылке (или я не настолько умен, чтобы правильно отформатировать ее).

Eineki
источник
Я согласен с первой частью: конечно, вы могли бы выяснить, сколько ячеек у вас будет в ряду? Как еще вы это сгенерируете?
Nickf
13
Не обязательно, у меня есть приложение с динамически сгенерированной таблицей AJAX, и количество столбцов может меняться от обратного вызова до обратного вызова. Кроме того, при разработке вы можете «знать» количество столбцов, но это может измениться, и вы просто знаете, что пропустите один из них
Mad Halfling
11
Плюс, если вы добавите столбцы позже, вы можете забыть изменить colspan, лучше, чтобы это всегда было max.
Адам
-2

Согласно спецификации colspan="0" должна приводиться таблица шириной тд.

Однако это верно только в том случае, если ваша таблица имеет ширину! Таблица может содержать строки различной ширины. Таким образом, единственный случай, когда средство визуализации знает ширину таблицы, если вы определите группу colgroup ! В противном случае результат colspan = "0" является неопределимым ...

http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan

Я не могу проверить это на старых браузерах, но это часть спецификации, начиная с 4.0 ...

FERcsI
источник
«это часть спецификации начиная с 4.0» - нет, не совсем. Это было частью спецификации, но это было удалено в HTML 5, а значение colspan0 было запрещено. И w3.org/TR/html50/… (спецификация HTML 5.0), и html.spec.whatwg.org/multipage/… (последний стандарт жизни WhatWG HTML) colspanдолжны быть больше нуля. И как отмечалось в других ответах здесь, браузеры фактически никогда не реализовывали старое поведение HTML 4, которое вы цитируете.
Марк Амери
-6

попробуйте использовать «colSpan» вместо «colspan». IE любит версию camelBack ...


источник
4
только при использовании IE и настройке через JavaScript и .setAttribute ('colSpan', int); Обратите внимание, что это было исправлено в IE8 (только в режиме stds)
scunliffe
1
+1 - я этого не знал, и это было огромной помощью! Я не думал, что colSpan даже работал в IE6.
Mwilcox