当前位置：首页 > CSS

网页制作css表格

2026-03-11 22:44:48CSS

CSS 表格样式设计

基础表格结构 HTML 表格由 <table>、<tr>（行）、<th>（表头）和 <td>（单元格）组成。基础结构如下：

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>内容A</td>
    <td>内容B</td>
  </tr>
</table>

常用CSS属性

边框与间距

网页制作css表格

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 表格宽度 */
}
td, th {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 8px; /* 内边距 */
}

颜色与字体

th {
  background-color: #f2f2f2; /* 表头背景色 */
  font-weight: bold; /* 加粗 */
}
tr:nth-child(even) {
  background-color: #f9f9f9; /* 隔行变色 */
}

高级样式技巧

悬停效果

网页制作css表格

tr:hover {
  background-color: #e6f7ff; /* 鼠标悬停变色 */
}

响应式表格 添加横向滚动条适应小屏幕：

div.table-container {
  overflow-x: auto;
}

斑马线样式 通过CSS选择器实现交替行颜色：

tr:nth-child(odd) {
  background: #fff;
}
tr:nth-child(even) {
  background: #f5f5f5;
}

代码示例：完整样式表

/* 基础样式 */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

th, td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #4CAF50;
  color: white;
}

/* 交互效果 */
tr:hover {
  background-color: #f1f1f1;
}

/* 响应式处理 */
@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}