Форматирование столбцов таблицы

StackOverflow https://stackoverflow.com/questions/157770

  •  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>

Ссылка на элемент col

A col тег должен быть внутри colgroup тег, возможно, это как-то связано с проблемой.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top