/* 基础样式 */ body { background-color: #2F2F2F; /* 背景颜色 */ color: #EAEAEA; /* 正文字体颜色 */ } table { width: 76%; /* 默认表格宽度（电脑端） */ border-collapse: collapse; /* 合并边框 */ margin: 20px auto; /* 居中显示 */ } th, td { padding: 12px; /* 内边距 */ text-align: left; /* 文字左对齐 */ border-bottom: 1px solid #3A3A3A; /* 横线颜色 */ } th { font-family: 'Montserrat-Regular', sans-serif; /* 表头字体 */ color: #F1F1F1; /* 标题字体颜色 */ padding-bottom: 24px; /* 增加标题和正文之间的间距 */ } td { font-family: 'Opensans-Regular', sans-serif; /* 正文字体 */ vertical-align: top; /* 内容顶部对齐 */ color: #EAEAEA; /* 正文字体颜色 */ } /* 设置第一列的宽度 */ td:first-child { width: 200px; /* 调整这个值以使第一列的文字都在同一行 */ white-space: nowrap; /* 防止文字换行 */ } /* 电脑端样式 */ @media (min-width: 768px) { th { font-size: 41px; /* 表头字号 */ } td { font-size: 16px; /* 正文字号 */ } } /* 移动端样式 */ @media (max-width: 767px) { table { width: 90%; /* 移动端表格宽度为100% */ } th, td { font-size: 14px; /* 表头和正文字号 */ } th { padding-bottom: 16px; /* 移动端减少标题和正文之间的间距 */ } /* 移动端调整第一列宽度 */ td:first-child { width: 150px; /* 移动端适当减小宽度 */ } }