Set table css

In web development, a table is a common HTML element, usually used to present data or information. In order to make the table more beautiful and easier to read, we can customize it through CSS styles. In this article, I will introduce how to set the CSS style of table.

1. Basic style settings

1. Table border style settings

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

2. Table width and height settings

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

3. Table header and table content style settings

In the table header (thead) and table content (tbody), we can set different styles. As shown below:

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

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

2. Advanced style settings

1. Table zebra crossing style settings

You can use CSS to make the even and odd rows of the table Rows are given different background colors to make them easier to distinguish.

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

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

2. Table text alignment and line wrapping settings

The text alignment and text wrapping in the table can also be set through CSS.

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

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

3. Table cell merge style setting

As shown in the figure below, we can merge two cells of the table to show a more complex data presentation. .

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

The above is an introduction to several table CSS style setting methods. I hope it can be helpful to everyone. Through the flexible use of CSS, we can present different styles and visual effects for tables, making the page more beautiful and easier to read.

The above is the detailed content of Set table css. For more information, please follow other related articles on the PHP Chinese website!