css 修改table th tr边框样式
时间: 2024-03-25 17:35:37 浏览: 17
要修改table中th和tr元素的边框样式,可以使用以下CSS样式:
```css
table {
border-collapse: collapse; /*合并边框*/
}
table th, table td {
border: 1px solid #ccc; /*设置边框*/
padding: 8px; /*设置单元格内边距*/
}
table th {
font-weight: bold; /*设置表头加粗*/
text-align: left; /*设置表头文本居左对齐*/
}
table tr:nth-child(even) {
background-color: #f2f2f2; /*设置交替背景色*/
}
```
以上样式将会实现以下效果:
- 将边框合并为一条,让表格看起来更整洁;
- 设置表格中所有单元格的边框样式为1像素实线,内边距为8像素;
- 设置表头边框加粗,文本居左对齐;
- 设置交替行背景色,方便用户在长表格中阅读。
您可以根据实际需求调整以上CSS样式。
相关问题
antdesignvue1.7 css如何修改table样式
在 Ant Design Vue 1.7 中,Table 组件的样式可以通过 CSS 进行修改。以下是一个示例:
```html
<template>
<a-table :columns="columns" :data-source="data" class="custom-table" />
</template>
<style>
.custom-table {
/* 修改表格边框样式 */
border: 1px solid #ddd;
/* 修改表头背景色和字体颜色 */
.ant-table-thead > tr > th {
background-color: #fafafa;
color: #333;
}
/* 修改表格单元格背景色和字体颜色 */
.ant-table-tbody > tr > td {
background-color: #fff;
color: #666;
}
/* 修改表格奇数行背景色 */
.ant-table-tbody > tr:nth-child(odd) > td {
background-color: #f5f5f5;
}
/* 修改表格鼠标悬停背景色 */
.ant-table-row:hover > td {
background-color: #e6f7ff;
}
}
</style>
```
在上面的示例中,我们通过 `.custom-table` 类选择器来修改表格的样式。我们可以通过 CSS 修改表格的边框样式、表头和表格单元格的背景色和字体颜色、表格奇数行的背景色以及鼠标悬停时的背景色。
Table的CSS美化样式
以下是一些基本的CSS样式,可以用来美化HTML中的Table:
1. 设置表格边框样式
```
table {
border-collapse: collapse;
border: 1px solid #ddd;
}
```
2. 设置表格单元格的边框样式
```
td, th {
border: 1px solid #ddd;
padding: 8px;
}
```
3. 设置表头单元格的背景色和文字颜色
```
th {
background-color: #f2f2f2;
color: #444;
}
```
4. 设置表格的宽度和居中
```
table {
width: 100%;
margin: auto;
}
```
5. 设置表格中的奇偶行背景色
```
tr:nth-child(even) {
background-color: #f2f2f2;
}
```
可以根据实际需要进行调整和修改,以达到更好的美化效果。