Question

如何在html中更改单个列的背景颜色？我有几个html页面链接到带有12列网格的css文件，我将一些html页面中一列的背景更改为与常规背景颜色（白色）不同的颜色，但不是其他列。另外，我想更改此列的文本颜色。我怎么能这样做？

Answer 1

与HTML table元素相关，可以实现如下示例所示：

<table>
<tr>
<td></td>
<td style="background-color:#909090;"></td>
<td></td>
</tr>
</table>

或者，以更复杂的方式使用CSS3风格，如：

table td:nth-child(2)
{
  background-color:#909090;
}

希望这会有所帮助。

Answer 2

如果您没有使用<table>但使用<div>标记构建布局，则可以像这样实现：

<div class="container">
    <div>
        First column
    </div>
    <div style="background-color: red">
        Second column
    </div>
    ...
</div>

或者，在CSS中：

.container div:nth-child(2) {
    background-color: red;
}

Answer 3

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

如何在html中更改单个列的背景颜色？

3 个答案: