CSS实现表格美化及优化

NTZTC • 2025-01-16 15:47 • 编程

一、使用CSS样式美化表格

1、使用CSS选择器选中表格，并设置表格的边框宽度、样式和颜色，如下：

table {
  border-collapse: collapse; /* 合并边框 */
  border-width: 1px; /* 边框宽度 */
  border-style: solid; /* 边框样式 */
  border-color: #ccc; /* 边框颜色 */
}

2、为表格的奇偶行设置不同的背景色，提高表格可读性，如下：

tr:nth-child(odd) { /* 奇数行 */
  background-color: #f9f9f9;
}
tr:nth-child(even) { /* 偶数行 */
  background-color: #fff;
}

二、使用CSS样式优化表格

1、单元格内的文本过长时，会对表格宽度造成影响，可以使用CSS属性 word-break 和 text-overflow 控制文本内容的显示，如下：

td {
  white-space: nowrap; /* 防止单元格文本换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  word-break: break-all; /* 单词过长自动换行 */
}

2、当表格宽度较小时，表格可能会出现横向滚动条，可以使用CSS属性 min-width 设置表格的最小宽度，避免表格压缩变形，如下：

table {
  min-width: 500px; /* 设置表格最小宽度 */
}

三、使用CSS样式添加表格样式

1、为表格标题添加样式，如下：

caption {
  font-size: 16px; /* 字号设置 */
  font-weight: bold; /* 加粗 */
  text-align: left; /* 居左 */
}

2、为表头单元格添加背景色和居中对齐，如下：

th {
  background-color: #ccc; /* 表头背景色 */
  text-align: center; /* 居中对齐 */
}

3、为表格单元格添加鼠标移上去的效果，如下：

td:hover {
  background-color: #ffff99; /* 鼠标移上去背景色 */
}

四、使用CSS样式合并单元格

1、使用CSS属性 rowspan 合并表格行，如下：

<td rowspan="2">单元格内容</td>

2、使用CSS属性 colspan 合并表格列，如下：

<td colspan="2">单元格内容</td>

五、完整示例代码

HTML：

<table>
  <caption>表格标题</caption>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
</table>

CSS：

table {
  border-collapse: collapse; /* 合并边框 */
  border-width: 1px; /* 边框宽度 */
  border-style: solid; /* 边框样式 */
  border-color: #ccc; /* 边框颜色 */
  min-width: 500px; /* 设置表格最小宽度 */
}
tr:nth-child(odd) { /* 奇数行 */
  background-color: #f9f9f9;
}
tr:nth-child(even) { /* 偶数行 */
  background-color: #fff;
}
td {
  white-space: nowrap; /* 防止单元格文本换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  word-break: break-all; /* 单词过长自动换行 */
}
caption {
  font-size: 16px; /* 字号设置 */
  font-weight: bold; /* 加粗 */
  text-align: left; /* 居左 */
}
th {
  background-color: #ccc; /* 表头背景色 */
  text-align: center; /* 居中对齐 */
}
td:hover {
  background-color: #ffff99; /* 鼠标移上去背景色 */
}

原创文章，作者：NTZTC，如若转载，请注明出处：https://www.506064.com/n/331439.html