Ответ 1

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

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

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

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

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

Ответ 2

Это хак и НЕ гарантирует, что ваша строка охватывает все столбцы

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

colspan="100%"

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

Внимание:

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

Ответ 3

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

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>

Ответ 4

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

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

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

Вы можете определить количество столбцов в таблице с чем-то вроде этого:

var firstRow = tableBody.getElementsByTagName('tr')[0];
var numcols = firstRow.getElementsByTagName('td').length;

И теперь используйте этот столбец в качестве диапазона столбцов. Это предполагает, что у вас есть ссылка на элемент body для таблицы, но это должно быть просто.

Ответ 8

Просто хочу добавить свой опыт и ответить на это.
Примечание. Он работает только тогда, когда у вас есть предварительно определенные table и tr с th s, но загружаются в ваши строки (например, через 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;
    }
}

Ответ 9

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

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

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

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

Ответ 10

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

Ответ 11

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

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

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

Ответ 12

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