Форматирование столбцов таблицы - PullRequest
Новая
       30

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

18 голосов
/ 01 октября 2008

Я пытаюсь отформатировать столбец в <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 ]

36 голосов
/ 02 октября 2008

Насколько я знаю, вы можете отформатировать следующее, используя 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 это не сработает.

6 голосов
/ 01 октября 2008

Лучше всего применять стиль непосредственно к тегам <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 }

Также: я предполагаю, что ваш код выше только для демонстрационных целей, и вы не собираетесь применять встроенные стили.

2 голосов
/ 13 ноября 2014

Возможно, вам просто нужно это: 

tr td:first-child label {
    font-weight: bold;
}
1 голос
/ 17 января 2010

Прочитав это, когда я пытался оформить таблицу так, чтобы первый столбец был полужирным, а остальные четыре столбца - обычным текстом. Использование тега col выглядело как путь, но хотя я мог установить ширину столбцов с атрибутом width, font-weight: bold не сработал бы Спасибо, что указали мне в направлении решения. Стилизуя все элементы td td {font-weight: bold;}, а затем используя соседний селектор брата, выберите столбцы 2-5 и верните их в обычный td + td {font-weight: normal;} Вуаля, все хорошо:)

0 голосов
/ 01 октября 2008

Вы пытались применить стиль через класс 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

0 голосов
/ 01 октября 2008
Тег

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

...