###
CSS Table 属性列表及每个属性的作用与使用方法
以下是
CSS中与表格（`<table>`）相关的属性及其作用
和用法：
#### 1. `border-collapse`
- **作用**: 控制表格边框是否合并。如果设置为`collapse`，相邻单元格的边框将合并为一个单一边框；如果设置为`separate`，则每个单元格的边框保持独立[^2]。
- **
用法**:
```
css
table {
border-collapse: collapse; /* 或 separate */
}
```
#### 2. `border-spacing`
- **作用**: 当`border-collapse`为`separate`时，定义单元格之间的间距。
- **
用法**:
```
css
table {
border-collapse: separate;
border-spacing: 10px 5px; /* 水平间距 垂直间距 */
}
```
#### 3. `caption-side`
- **作用**: 定义表格标题（`<caption>`）的位置，可以是顶部或底部[^2]。
- **
用法**:
```
css
table {
caption-side: top; /* 或 bottom */
}
```
#### 4. `empty-cells`
- **作用**: 决定是否显示空单元格的边框
和背景。
- **
用法**:
```
css
table {
empty-cells: show; /* 或 hide */
}
```
#### 5. `table-layout`
- **作用**: 定义表格布局算法。`auto`表示列宽由内容决定，`fixed`表示列宽由表格宽度
和列宽属性决定。
- **
用法**:
```
css
table {
table-layout: fixed; /* 或 auto */
}
```
#### 6. `border`
- **作用**: 设置表格或单元格的边框样式、宽度
和颜色[^1]。
- **
用法**:
```
css
table, th, td {
border: 1px solid #F00; /* 红色实线边框 */
}
```
#### 7. `width`
和 `height`
- **作用**: 分别定义表格或单元格的宽度
和高度。
- **
用法**:
```
css
table {
width: 100%; /* 表格宽度为父容器的100% */
}
td {
height: 50px; /* 单元格高度为50像素 */
}
```
#### 8. `text-align`
和 `vertical-align`
- **作用**: 分别控制单元格内文本的水平对齐方式
和垂直对齐方式。
- **
用法**:
```
css
td {
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
}
```
#### 9. `background-color`
- **作用**: 设置表格或单元格的背景颜色。
- **
用法**:
```
css
table {
background-color: #EEE; /* 浅灰色背景 */
}
```
#### 10. `padding`
- **作用**: 定义单元格内内容与边框之间的间距。
- **
用法**:
```
css
td {
padding: 10px; /* 单元格内边距为10像素 */
}
```
#### 11. `color`
- **作用**: 设置表格或单元格中文本的颜色。
- **
用法**:
```
css
th {
color: white; /* 文本颜色为白色 */
}
```
#### 12. `font-family`
和 `font-size`
- **作用**: 分别定义表格或单元格中文本的字体类型
和大小。
- **
用法**:
```
css
table {
font-family: Arial, sans-serif; /* 字体为Arial */
font-size: 14px; /* 字体大小为14像素 */
}
```
#### 13. `white-space`
- **作用**: 控制单元格内文本的换行行为。`normal`允许换行，`nowrap`禁止换行。
- **
用法**:
```
css
td {
white-space: nowrap; /* 禁止换行 */
}
```
#### 14. `
overflow`
- **作用**: 当内容超出单元格时，定义如何处理溢出部分。
- **
用法**:
```
css
td {
overflow: hidden; /* 隐藏溢出内容 */
}
```
### 注意事项
- 表格的样式可以通过类选择器或ID选择器进行更精确的控制[^3]。
- 不同浏览器可能对某些
CSS属性的支持程度不同，需注意兼容性问题[^4]。
扫一扫
672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
