Элемент colgroup таблицы HTML не работает?

Мне нужны разные стили для каждого столбца таблицы. Я читал, что вы можете сделать это, используя <colgroup> или <col>, но мне не повезло. У меня есть пример здесь, и ничего не меняется. Я делаю что-то неправильно? Будет ли это работать на xhtml?

Я знаю, что я мог бы добавить атрибут class для каждого <td>, но это кажется слабым.

Ответ 1

Это правильно. Хотя colgroup сам поддерживается всеми браузерами, это не относится к атрибутам внутреннего элемента col. Из возможных атрибутов поддерживается только width для всех браузеров. Но в отличие от CSS, <col width=""> поддерживает только пиксельные и процентные ширины.

Не используйте его. Вместо этого создайте классы CSS и назначьте их каждому td. Да, это отстой.

EDIT Обновленная ссылка выше на страницу с лучшей информацией

Ответ 2

Установите table-layout в auto вместо фиксированного...

table {table-layout: auto;}

Мой личный сайт поддерживает несколько тем, и я все время вижу эти различия.

Ответ 3

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

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

table>tbody>td:nth-child(2){font-weight: bolder;}

Ответ 4

Если вам действительно нужно использовать теги cols без ограничения реакции, тогда dangerouslySetInnerHTML поможет:

<colgroup dangerouslySetInnerHTML={{
  __html: '
    <col style="background: red;"/>
    <col style="width: 20px;"/>
  '
}}/>

Обратите внимание, что хотя это работает, это не рекомендуемый способ работы с реагировать.