Охват всех столбцов

StackOverflow https://stackoverflow.com/questions/398734

  •  29-08-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

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

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

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

Это НЕ работает, если CSS-свойству table-layout присвоено значение fixed .

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

Другие советы

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

colspan="100%"

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

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

Если вы хотите создать ячейку '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-элементами, но, я думаю, это был бы взлом (поэтому не рекомендуется).Другим вариантом было бы возиться с плавающими разделениями, но это гадость!

Делай

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

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

    Источники:

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

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

    и

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

    Нет.

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

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

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

Ниже приведено краткое решение es6 (аналогичное Ответ Rainbabba's но без 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>

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top