前端如何设置表格边框样式和单元格间距？

引言

在前端开发中，表格是展示数据的一种常见方式。合理设置表格的边框样式和单元格间距不仅能让表格看起来更加美观，还能提高数据的可读性。本文将详细介绍如何使用 CSS 来定制表格的外观，包括边框样式和单元格间距，以及一些实际工作中可能会遇到的问题和解决方案。

表格的基本概念

在 HTML 中，表格由 <table> 元素构成，内部包含 <tr>（行）、<td>（数据单元格）和 <th>（表头单元格）。表格的样式可以通过内联样式、内部样式表或者外部样式表来定义。

基本结构

<table>
  <thead>
    <tr>
      <th>标题 1</th>
      <th>标题 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据 1</td>
      <td>数据 2</td>
    </tr>
    <tr>
      <td>数据 3</td>
      <td>数据 4</td>
    </tr>
  </tbody>
</table>

示例一：基本表格样式

CSS

table {
   
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 设置表格宽度 */
}

th, td {
   
  border: 1px solid #ddd; /* 设置单元格边框 */
  padding: 8px; /* 设置内边距 */
  text-align: left; /* 文字左对齐 */
}

th {
   
  background-color: #f2f2f2; /* 设置表头背景色 */
  font-weight: bold; /* 设置加粗字体 */
}

说明

这个示例展示了最基本的表格样式设置。border-collapse: collapse; 让表格边框合并为单一的边框，避免出现双线的情况。padding 属性为单元格添加了内边距，使得内容与边框之间有一定的间距。

示例二：交替行颜色

为了增加表格的可读性，我们可以给奇数行和偶数行设置不同的背景颜色。

CSS

table tr:nth-child(even) {
   
  background-color: #f2f2f2; /* 偶数行背景色 */
}

table tr:nth-child(odd) {