Объединение столбцов все столбцы

просто использовать это:

colspan="100%"

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

---

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

Если вы хотите сделать ячейку "заголовок", которая охватывает все столбцы, в качестве заголовка для вашей таблицы, вы можете использовать тег заголовка (http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) Этот элемент предназначен для этой цели. Он ведет себя как div, но не охватывает всю ширину родительской таблицы (например, div будет делать в том же положении (не пытайтесь сделать это дома!)), вместо этого он охватывает ширина стола. Есть некоторые кросс-браузерные проблемы с границами и такие (было приемлемо для меня). В любом случае, вы можете сделать его похожим на ячейку, которая охватывает все столбцы. Внутри вы можете создавать строки, добавляя div-элементы. Я не уверен, что вы можете вставить его между TR-элементами, но это будет Хак, я думаю (поэтому не рекомендуется). Другой вариант-возиться с плавающими дивами, но это фу!

Do

<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>

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

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

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

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

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

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

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

согласно W3C, С COLGROUP - тег.

в качестве частичного ответа, Вот несколько моментов о 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 living standard (доминирующий стандарт сегодня), и последняя спецификация W3 HTML 5 все не содержат формулировку, цитируемую из HTML 4 выше, и единодушно согласны с тем, что colspan 0 не допускается, с такой формулировкой, которая появляется во всех три спецификации:

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

  источники:

  • https://www.w3.org/TR/html50/tabular-data.html#attributes-common-to-td-and-th-elements
  • https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements
  • https://www.w3.org/TR/html53/tabular-data.html#attributes-common-to-td-and-th-elements

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

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

  и

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

  нет.

  если вы еще не знаете, что W3Schools обычно презирают веб-разработчики за его частые неточности, считают это уроком почему.

просто хочу добавить свой опыт и ответить на это.
Примечание: он работает только тогда, когда у вас есть предварительно определенный table и 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;
    }
}

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

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

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

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

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

кстати 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

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

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

попробуйте использовать " colSpan "вместо"colspan". Т. е. любит кеймелбек версия...