[分享]css写表格第一行三个表格

在创建网页中，表格是一种必不可少的元素。CSS可以让你轻松地为表格添加样式，使其更加易于阅读和美观。下面我们就来介绍一下如何使用CSS来改变表格中第一行的前三个单元格的样式。 名称 价格 数量 总...

在创建网页中，表格是一种必不可少的元素。CSS可以让你轻松地为表格添加样式，使其更加易于阅读和美观。下面我们就来介绍一下如何使用CSS来改变表格中第一行的前三个单元格的样式。

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
      <th>总价</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品A</td>
      <td>$23.99</td>
      <td>4</td>
      <td>$95.96</td>
    </tr>
    <tr>
      <td>商品B</td>
      <td>$46.99</td>
      <td>2</td>
      <td>$93.98</td>
    </tr>
  </tbody>
</table> 

以上是一个普通的表格，下面让我们看一下如何通过CSS代码修改表格中第一行的前三个单元格的样式。

table {
  border-collapse: collapse;
}

th {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
  padding: 0.5rem 1rem;
  text-align: left;
}

th:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

th:nth-child(2) {
  background-color: #d9d9d9;
  color: white;
  text-align: center;
}

th:nth-child(3) {
  background-color: #ff9933;
  color: white;
  text-align: center;
} 

代码解释：

1. 设置表格的边框合并为单一边框，使表格更美观。

2. 设置所有表头的基本样式，如背景颜色、字体颜色、粗体等。

3. 使用:first-child伪类为第一个表格头单元格添加左上角圆角。

4. 使用:nth-child(n)伪类为第n个表格头单元格添加相应的样式，如背景颜色、文字颜色、对齐方式等。

以上CSS代码可以让表格在视觉上更美观，同时使其更容易阅读和理解。