CSS 表格：Table

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中，可以使用不同的对齐方式来设置表格文字。

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

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

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

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

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

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

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

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