Форматирование столбцов таблицы
-
03-07-2019 - |
Вопрос
Я пытаюсь отформатировать столбец в <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>
Решение
Насколько я знаю, вы можете отформатировать только следующее, используя 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 это не сработает.
Другие советы
Лучше всего нанести укладку непосредственно на <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 }
Также:Я предполагаю, что ваш приведенный выше код предназначен только для демонстрационных целей, и на самом деле вы не собираетесь применять встроенные стили.
Возможно, вам просто нужно было это:
tr td:first-child label {
font-weight: bold;
}
Читая это, я пытался оформить таблицу таким образом, чтобы первый столбец был выделен жирным шрифтом, а остальные четыре столбца были обычным текстом.Использование тега col казалось правильным решением, но хотя я мог бы задать ширину столбцов с помощью атрибута width, font-weight:выделенный жирным шрифтом не сработал бы
Спасибо, что указали мне направление решения.Путем стилизации всех элементов td td {font-weight: bold;}
а затем, используя смежный селектор, выберите столбцы 2-5 и приведите их в нормальное состояние td + td {font-weight: normal;}
Вуаля, все хорошо :)
Вы пробовали применить стиль с помощью 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>
A col
тег должен быть внутри colgroup
тег, возможно, это как-то связано с проблемой.