CSS 表格：Table

文章目录

• [CSS 表格](#CSS 表格)
• 表格边框
• 折叠边框
• 表格高度和宽度
• 表格文字对齐
• 表格填充
• 表格颜色
• 设置表格标题的位置

---

CSS 表格

CSS 表格属性可以用来改变表格的样式。

比如，以下代码会把表格的边框变为红色，且每个单元格之间有一条竖线：

table {
  border-collapse: collapse;
  border: 2px solid red;
}

td {
  border: 1px solid black;
  border-width: 0 1px;
  padding: 10px;
}

在以上代码中：

• border-collapse: collapse; 会将表格的边框合并为一个单一的边框，而不是默认的双边框。
• border: 2px solid red; 将整个表格的边框设置为2像素宽，线条颜色为红色。
• border: 1px solid black; 将单元格的边框设置为1像素宽，线条颜色为黑色。
• border-width: 0 1px; 会将单元格之间的竖线宽度设置为0，而单元格自身的竖线宽度设置为1像素。这可以实现单元格之间的空白只有一条线的视觉效果。
• padding: 10px; 为单元格添加内边距，这可以让文字和边框之间有一定的距离，提高可读性。

表格边框

CSS中，可以使用border属性来设置表格边框的样式。例如：

table {
  border: 1px solid black;
}

这里，border的属性值设置的是1px solid black，表示表格边框宽度为1像素，线条样式为实线，线条颜色为黑色。

另外，也可以分别设置每个边框的样式，如：

table {
  border-top: 1px solid red;
  border-right: 2px dashed green;
  border-bottom: 3px dotted blue;
  border-left: 4px double yellow;
}

这里，分别为表格的上、右、下、左四个边框设置了不同的样式。如果需要显示边框，需要设置border属性。同时，在表格内部，单元格之间的边框是默认不显示的，如果需要显示，需要给单元格也设置border属性。

折叠边框

CSS折叠边框是一种用于实现边框缩小或扩张的CSS技巧，主要通过设置边框的宽度和高度，使边框在需要缩小或扩张时根据实际需要进行折叠。这种效果在处理排版、UI设计或其他需要动态改变边框大小的场景时十分有用。

要实现折叠边框，你可以使用CSS的box-shadow属性。通过将阴影设置为一个负值，你可以创建一个看起来像是边框被折叠的效果。例如：

.fold-border {
    width: 100px;
    height: 100px;
    box-shadow: -10px 0px 10px 0px #000;
}

这里，box-shadow的四个参数分别代表水平偏移、垂直偏移、模糊距离和阴影颜色。通过调整水平偏移和垂直偏移，你可以改变阴影的位置，从而模拟出折叠边框的效果。

请注意，这只是一种模拟折叠边框的方法，实际的折叠边框效果可能需要使用其他技术或者配合其他属性来实现。例如，可能需要考虑边框的圆角、背景色、描边效果等因素，来确保折叠效果看起来更加自然。

表格高度和宽度

在CSS中，可以使用height和width属性来设置表格的尺寸。

width属性用于设置表格的宽度，它可以接受不同的单位，如百分比或像素。例如：

table {
  width: 100%;  /* 表格宽度占父元素的100% */
}

table {
  width: 600px;  /* 表格宽度为600像素 */
}

height`属性用于设置表格的高度，单位通常是像素。例如：

table {
  height: 200px;  /* 表格高度为200像素 */
}

如果需要同时设置表格的宽和高，可以一起使用这两个属性。例如：

table {
  width: 100%;
  height: 200px;
}

此外，可以使用max-width和min-width属性来限制表格的最大和最小宽度，以及使用max-height和min-height属性来限制表格的最大和最小高度。例如：

table {
  max-width: 800px;  /* 表格宽度最大为800像素 */
  min-height: 300px;  /* 表格高度最小为300像素 */
}

这些属性可以单独使用，也可以组合使用，以实现表格在不同场景下的美观和整洁效果。

表格文字对齐

在CSS中，可以使用不同的对齐方式来设置表格文字。

1. 对于单元格中的文字，可以使用text-align属性来设置水平对齐方式，可选值包括left（左对齐）、right（右对齐）、center（居中对齐）和justify（两端对齐）。例如：

   td {
     text-align: center;  /* 文字居中对齐 */
   }

2. 对于垂直对齐，可以使用vertical-align属性，可选值包括baseline（基线对齐）、middle（垂直居中）和bottom（底部对齐）。例如：

   td {
     vertical-align: middle;  /* 文字垂直居中 */
   }

3. 对于表格标题或表头，可以使用align属性来设置水平对齐方式，可选值包括left（左对齐）、center（居中对齐）和right（右对齐）。例如：

   th {
     align: center;  /* 表头文字居中对齐 */
   }

需要注意的是，对于表格的行高或单元格宽度，可以通过设置单元格的height或width属性来调整。如果单元格中的内容超出了单元格的宽度或高度，可以使用CSS的溢出处理方式来处理，例如使用overflow: auto;来自动滚动条显示。

表格填充

CSS中，可以使用不同的填充方式来填充单元格。

1. 对于单元格中的文字，可以使用padding属性来设置单元格的内边距，从而调整文字与单元格边缘的距离。例如：

   td {
     padding: 10px;  /* 单元格内边距为10像素 */
   }

2. 对于单元格的背景颜色，可以使用background-color属性来设置。例如：

   td {
     background-color: #f0f0f0;  /* 单元格背景色为灰色 */
   }

3. 对于单元格的边框线条，可以使用border属性来设置线条的样式、宽度和颜色。例如：

   td {
     border: 1px solid #000;  /* 单元格边框为1像素的黑色实线 */
   }

4. 对于表格的行或列，可以使用rowspan或colspan属性来合并单元格。例如：

   td {
     rowspan: 2;  /* 单元格跨行 */
   }

5. 对于表格的标题，可以使用caption属性来设置标题的样式。例如：

   caption {
     font-size: 20px;  /* 标题字体大小为20像素 */
     caption-side: top;  /* 标题在表格上方 */
   }

表格颜色

在CSS中，可以使用不同的颜色属性来设置表格的颜色。

1. 对于表格的边框线条，可以使用border-color属性来设置线条的颜色。例如：

   table {
     border-color: #000;  /* 边框线条颜色为黑色 */
   }

2. 对于单元格的背景颜色，可以使用background-color属性来设置。例如：

   td {
     background-color: #f0f0f0;  /* 单元格背景色为灰色 */
   }

3. 对于表格的行或列，可以使用rowspan或colspan属性来合并单元格，并设置合并单元格的背景颜色。例如：

   td {
     rowspan: 2;
     background-color: #fff;  /* 合并单元格的背景色为白色 */
   }

4. 对于表格的标题，可以使用caption-color属性来设置标题的颜色。例如：

   caption {
     caption-color: #f00;  /* 标题颜色为红色 */
   }

需要注意的是，颜色属性的值可以是预定义的颜色名称、十六进制颜色代码、RGB值或HSL值等。例如，红色可以使用red、#f00、rgb(255,0,0)或hsl(0,100%,50%)来表示。

设置表格标题的位置

在CSS中，可以使用caption-side属性来设置表格标题的位置。

1. 要将表格标题放在表格的上方，可以设置caption-side属性为top。例如：

   caption {
     caption-side: top;
   }

2. 要将表格标题放在表格的下方，可以设置caption-side属性为bottom。例如：

   caption {
     caption-side: bottom;
   }

3. 要省略表格标题，可以将caption-side属性设置为none。例如：

   caption {
     caption-side: none;
   }

注：在CSS 2.1之前，提供了两个值："left"和"right"来分别将标题定位在表的左边和右边。但这两个值在最终的2.1规范中被移除，现在已经不再被浏览器支持。