Мне нужны разные стили для каждого столбца таблицы. Я читал, что вы можете сделать это, используя <colgroup> или <col>, но мне не повезло. У меня есть пример здесь, и ничего не меняется. Я делаю что-то неправильно? Будет ли это работать на xhtml?
Я знаю, что я мог бы добавить атрибут class для каждого <td>, но это кажется слабым.
Это правильно. Хотя colgroup сам поддерживается всеми браузерами, это не относится к атрибутам внутреннего элемента col. Из возможных атрибутов поддерживается только width для всех браузеров. Но в отличие от CSS, <col width=""> поддерживает только пиксельные и процентные ширины.
Не используйте его. Вместо этого создайте классы CSS и назначьте их каждому td. Да, это отстой.
EDIT Обновленная ссылка выше на страницу с лучшей информацией
Установите table-layout в auto вместо фиксированного...
table {table-layout: auto;}
Мой личный сайт поддерживает несколько тем, и я все время вижу эти различия.
Вы можете использовать селектор css, чтобы получить аналогичные результаты без добавления дополнительных классов.
В качестве примера, если вы хотите указать конкретный стиль для второго столбца, вы можете использовать:
table>tbody>td:nth-child(2){font-weight: bolder;}
Если вам действительно нужно использовать теги cols без ограничения реакции, тогда dangerouslySetInnerHTML поможет:
<colgroup dangerouslySetInnerHTML={{
__html: '
<col style="background: red;"/>
<col style="width: 20px;"/>
'
}}/>
Обратите внимание, что хотя это работает, это не рекомендуемый способ работы с реагировать.