Форматирование столбцов таблицы
Я пытаюсь отформатировать столбец в <table/> с помощью элемента <col/>. Я могу установить background-color, width и т. д., Но не могу установить font-weight. Почему не работает?
<table>
<col style = "font-weight:bold; background-color:#CCC;">
<col>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Ответы 6
Тег col должен находиться внутри тега colgroup. Возможно, это связано с проблемой.
Вы пробовали применить стиль через класс CSS?
Похоже, что работает следующее:
<style type = "text/css">
.xx {
background: yellow;
color: red;
font-weight: bold;
padding: 0 30px;
text-align: right;
}
<table border = "1">
<col width = "150" />
<col width = "50" class = "xx" />
<col width = "80" />
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
Обратите внимание, что IE (Quirks Mode) позволяет работать с цветом. См. quirksmode.org/css/columns.html. Но, к сожалению, это не выход.
Лучше всего применить стиль непосредственно к тегам <td>. Я никогда не использовал тег <col>, но большинство браузеров позволяют применять форматирование на уровне <table> и <td> / <th>, но не на промежуточном уровне. Например, если у вас есть
<table>
<tr class = "Highlight">
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
тогда этот CSS не будет работать
tr.Highlight { background:yellow }
но это будет
tr.Highlight td { background:yellow }
Также: я предполагаю, что ваш код выше предназначен только для демонстрационных целей, и вы на самом деле не собираетесь применять встроенные стили.
Этот метод работает нормально. Я просто пытался избежать добавления атрибута <code> class </code> для каждого <code> td </code> первого столбца.
Насколько мне известно, с помощью CSS в элементе <col> можно форматировать только следующее:
- фоновый цвет
- граница
- ширина
- видимость
У этого страница есть дополнительная информация.
Херб прав - лучше стилизовать <td> напрямую. Я делаю следующее:
<style type = "text/css">
#mytable tr > td:first-child { color: red;} /* first column */
#mytable tr > td:first-child + td { color: green;} /* second column */
#mytable tr > td:first-child + td + td { color: blue;} /* third column */
</style>
</head>
<body>
<table id = "mytable">
<tr>
<td>text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
<tr>
<td>text 4</td>
<td>text 5</td>
<td>text 6</td>
</tr>
</table>
Однако в IE это не сработает.
Мне просто кажется, что вы немного переусердствовали с проблемой. Почему бы не создать «красный», «зеленый» и «синий» классы? Это будет работать везде и будет намного более интуитивно понятным, чем расширенные селекторы CSS.
Да, вы правы, селекторы CSS уродливы :) Но я лично предпочел бы уродливые селекторы CSS, чем необходимость добавлять атрибут класса в каждую ячейку таблицы, особенно если у вас есть статическая таблица (т.е. без генерации на стороне сервера), которая имеет много клетки.
Увы, это нарушит семантику colspans. В этом весь смысл элементов col и colgroup, какого черта вы не можете установить цвет с их помощью ?!
Читая это, я пытался создать таблицу таким образом, чтобы первый столбец был полужирным шрифтом, а остальные четыре столбца были обычным текстом.
Использование тега col казалось подходящим вариантом, но хотя я мог установить ширину столбцов с помощью атрибута width, font-weight: bold не работал
Спасибо, что указали мне направление решения.
Путем стилизации всех элементов td td {font-weight: bold;}, а затем с помощью соседнего селектора одноуровневого элемента для выбора столбцов 2-5 и их стиля обратно к обычному td + td {font-weight: normal;}
Вуаля, все хорошо :)
Возможно, вам просто нужно это:
tr td:first-child label {
font-weight: bold;
}
Как сказал Энди, но хочу убедиться, что он прикреплен к оригиналу (а он пока не может комментировать). col НЕ ОБЯЗАТЕЛЬНО должен быть в colgroup. <a href="w3.org/TR/html401/struct/tables.html#h-11.2.4.2">W3C Ссылка</a>