/* CSS table样式示例 */
/* 基本表格样式 */
table {
width: 100%; /* 表格宽度为父元素的100% */
border-collapse: collapse; /* 边框合并,避免双线效果 */
}
/* 设置表格边框 */
table, th, td {
border: 1px solid black; /* 所有表格、表头和单元格添加1像素黑色边框 */
}
/* 设置表头背景颜色和文本对齐方式 */
th {
background-color: #f2f2f2; /* 表头背景颜色为浅灰色 */
text-align: left; /* 文本左对齐 */
padding: 8px; /* 内边距 */
}
/* 设置表格单元格的内边距 */
td {
padding: 8px; /* 单元格内边距 */
}
/* 鼠标悬停在行上时改变背景颜色 */
tr:hover {
background-color: #ddd; /* 悬停时背景颜色变浅 */
}
border-collapse: collapse;:使表格边框合并,避免出现双线效果。border: 1px solid black;:为表格、表头和单元格添加1像素的黑色边框。background-color: #f2f2f2;:设置表头的背景颜色为浅灰色。padding: 8px;:为表头和单元格设置内边距,使内容与边框之间有一定的间距。tr:hover { background-color: #ddd; }:当鼠标悬停在表格行上时,改变该行的背景颜色,提升用户体验。上一篇:css 内边距
下一篇:css单数选择器
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站