Colspan все столбцы - PullRequest
Новая
       31

Colspan все столбцы

345 голосов
/ 30 декабря 2008

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

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

Ответы [ 13 ]

248 голосов
/ 17 февраля 2011

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

colspan="100%"

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

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

244 голосов
/ 30 декабря 2008

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

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

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

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

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

63 голосов
/ 24 сентября 2009

Если вы хотите сделать ячейку '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>
14 голосов
/ 30 декабря 2008

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

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

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

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

11 голосов
/ 16 сентября 2018

В качестве частичного ответа, вот несколько моментов о 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 из 0 не допускается, с такой формулировкой, которая присутствует во всех трех спецификациях:

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

    Источники:

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

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

    и

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

    NONE.

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

11 голосов
/ 28 марта 2014

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

}

Чтобы упростить реализацию, я декорирую любой тд / й, который мне нужен, с помощью класса, такого как "maxCol", тогда я могу сделать следующее: 

$('td.maxcols, th.maxcols').each(function(i,o) {
    $t = $($(o).parents('table')[0]); $(o).attr('colspan',  getMaxColCount($t));
});

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

4 голосов
/ 28 октября 2009

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

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

2 голосов
/ 08 октября 2018

Ниже приведено краткое решение 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>
0 голосов
/ 20 сентября 2017

У меня была та же проблема - как я решил свою проблему. Поместите все элементы управления, которые вы хотите охватить, в один тд

0 голосов
/ 07 ноября 2015

В соответствии со спецификацией colspan="0" должно привести к ширине таблицы td.

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

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

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

Страница:
...