Question

我正在尝试设置我创建的5x4表的某些特定部分。它应该是这样的：

每个偶数行和每个奇数行都应该有不同的颜色。
第二，第三和第四列中的文字应居中。

我有这张桌子：

<table>
<caption>Some caption</caption>
<colgroup>
  <col>
  <col class="value">
  <col class="value">
  <col class="value">
</colgroup>
<thead>
  <tr>
    <th id="year">Year</th>
    <th>1999</th>
    <th>2000</th>
    <th>2001</th>
  </tr>
</thead>
<tbody>
  <tr class="oddLine">
    <td>Berlin</td>
    <td>3,3</td>
    <td>1,9</td>
    <td>2,3</td>
  </tr>
  <tr class="evenLine">
    <td>Hamburg</td>
    <td>1,5</td>
    <td>1,3</td>
    <td>2,0</td>
  </tr>
  <tr class="oddLine">
    <td>München</td>
    <td>0,6</td>
    <td>1,1</td>
    <td>1,0</td>
  </tr>
  <tr class="evenLine">
    <td>Frankfurt</td>
    <td>1,3</td>
    <td>1,6</td>
    <td>1,9</td>
  </tr>
</tbody>
<tfoot>
  <tr class="oddLine">
    <td>Total</td>
    <td>6,7</td>
    <td>5,9</td>
    <td>7,2</td>
  </tr>
</tfoot>
</table>

我有这个CSS文件：

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 0px 5px;
}

#year {
    text-align: left;
}

.oddLine {
    background-color: #DDDDDD;
}

.evenLine {
    background-color: #BBBBBB;
}

.value {
    text-align: center;
}

这不起作用。列中的文本不居中。这里有什么问题？有没有办法解决它（除了改变我想要居中的所有单元格的类别？）

P.S。：我认为对.evenLine和.oddLine类有一些干扰。因为当我将“background：black”放在类“value”中时，它会更改第一行中列的背景颜色。问题是，如果我删除这两个类，text-align仍然不起作用，但background属性可以正常工作。啊...

Answer 1

使用CSS伪类。

tr:nth-child(even){
    background: #EEEEEE;
}
tr:nth-child(odd) {
    background: #FFFFFF;
}
td:nth-child(2), td:nth-child(3), td:nth-child(4) {
    text-align: center;
}

我实际上在几个小时前就发现了偶数和奇数选项。希望你能像我一样高兴地使用它们：D

编辑：修正了从tr到td和here's a fiddle

的最后一行

为了解答您的代码无效的原因，W3schools有答案。

＆＃34;注意：Firefox，Chrome和Safari仅支持colgroup元素的span和width属性。

将样式属性添加到标记中，让CSS处理背景，宽度和边框。这些是与标签一起使用的唯一CSS属性。＆＃34;

所以text-align没有效果。 Colgroup太老了。你必须与时代男人相处：P

样式化特定的列和行

1 个答案: