Colspan усі стовпці

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

Здається, встановлення colspanзначення, що перевищує теоретичну кількість стовпців, можливо, буде працювати, але воно не буде працювати, якщо ви table-layoutвстановили fixed. Чи є недоліки використання автоматичного макета з великою кількістю для colspan? Чи є більш правильний спосіб зробити це?

У мене є IE 7.0, Firefox 3.0 та Chrome 1.0

Атрибут colspan = "0" в TD НЕ охоплює всі TD в будь-якому з перерахованих вище браузерів .

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

Це НЕ працює, коли властивість CSS для макета таблиці встановлено на фіксовану.

Знову ж таки, це не ідеальне рішення, але, здається, працює у вищезгаданих 3-х версіях браузера, коли властивість CSS-макета таблиці є автоматичною . Сподіваюсь, це допомагає.

Просто скористайтеся цим:

colspan="100%"

Він працює на Firefox 3.6, IE 7 та Opera 11! (і, мабуть, на інших, я не міг спробувати)

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

Якщо ви хочете зробити клітинку "title", яка охоплює всі стовпці, як заголовок для вашої таблиці, ви можете використовувати тег заголовка ( 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>

Як часткова відповідь, ось декілька моментів, про 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 вище, і одноголосно погоджуються, що a colspanз 0 Це дозволено, оскільки це формулювання з’являється у всіх трьох специфікаціях:

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

  Джерела:

  • 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 за його часті неточності, розгляньте цей урок чому.

Для IE 6 вам потрібно дорівнювати colspan кількості стовпців у вашій таблиці. Якщо у вас є 5 стовпців, вам потрібно:colspan="5" .

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

IE реалізує визначення 3.2 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, colspan="0"опція діє лише з COLGROUPтегом.

Нижче наведено стисле рішення es6 (подібне до відповіді Рейнбабби, але без 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та 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;
    }
}

Можливо, я прямий мислитель, але я трохи спантеличений, чи не знаєте ви номер стовпця своєї таблиці?

До речі IE6 не вшановує colspan = "0", з визначеною або без колгрупи. Я також намагався використовувати 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

Редагувати: Скопіюйте та вставте посилання, форматування не сприймає подвійних частин протоколу у посиланні (або я не такий розумний, щоб правильно його форматувати).

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

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

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

Я не можу перевірити його на старих браузерах, але це частина специфікації з 4.0.

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