设置table css-前端问答-PHP中文网

设置table css

PHPz

发布： 2023-05-21 09:35:37

原创

1688人浏览过

在web开发中，表格（table）是一种常见的html元素，通常用于呈现数据或信息。为了使表格更美观和易于阅读，我们可以通过css样式来进行定制化处理。在本文中，我将为大家介绍如何设置table的css样式。

一、基本样式设置

表格边框样式设置

table {
  border-collapse: collapse;  /*合并单元格边框*/
  border: 1px solid #ddd;  /*设置边框样式*/
}

登录后复制

表格宽度和高度设置

table {
  width: 100%; /*设置表格的宽度*/
  height: auto; /*设置表格的高度*/
}

登录后复制

表头和表格内容样式设置

在表头（thead）和表格内容（tbody）中，我们可以设置不同的样式。如下所示：

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

table tbody td {
  padding: 10px; /*设置单元格内边距*/
}

登录后复制

二、进阶样式设置

表格斑马线样式设置

可以通过CSS来让表格的偶数行和奇数行呈现不同的背景色，以便于区分。

立即学习“前端免费学习笔记（深入）”；

创客贴设计

创客贴设计，一款智能在线设计工具，设计不求人，AI助你零基础完成专业设计！

查看详情

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

table tr:nth-child(odd) {
  background-color: #fff; /*设置奇数行背景色*/
}

登录后复制

表格文字对齐和换行设置

表格中的文字对齐方式和文本换行方式也可以通过CSS来进行设置。

table th {
  text-align: center; /*设置表头文字居中对齐*/
}

table td {
  text-align: left; /*设置表格内容文字左对齐*/
  white-space: nowrap; /*设置文本不换行*/
}

登录后复制

表格单元格合并样式设置

如下图所示，我们可以将表格的两个单元格进行合并，以展示更复杂的数据呈现方式。

表格单元格合并样式

<table>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>第一行第二列</td>
    <td>第一行第三列</td>
  </tr>
  <tr>
    <td colspan="2">第二行合并单元格</td>
  </tr>
</table>

登录后复制

以上是几种表格CSS样式设置方法的介绍，希望能够对大家有所帮助。通过CSS的灵活运用，我们可以为表格呈现出不同的风格和视觉效果，让页面更加美观和易读。

以上就是设置table css的详细内容，更多请关注php中文网其它相关文章！