css怎么制作表

2026-04-02 14:50:10CSS

使用HTML和CSS创建表格

在HTML中，表格通过<table>标签定义，CSS用于控制样式。以下是一个基础示例：

<table class="custom-table">
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
  </tbody>
</table>

基础CSS样式设置

通过CSS可以调整边框、间距等属性：

css怎么制作表

.custom-table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  margin: 20px 0;
}

.custom-table th, .custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.custom-table th {
  background-color: #f2f2f2;
}

添加悬停效果

增强交互性的悬停样式：

.custom-table tr:hover {
  background-color: #f5f5f5;
}

斑马纹表格

交替行颜色提升可读性：

css怎么制作表

.custom-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

响应式表格处理

在小屏幕设备上的适配方案：

@media screen and (max-width: 600px) {
  .custom-table {
    display: block;
    overflow-x: auto;
  }
}

高级样式技巧

圆角边框和阴影效果：

.custom-table {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 5px;
  overflow: hidden;
}

.custom-table th:first-child {
  border-top-left-radius: 5px;
}

.custom-table th:last-child {
  border-top-right-radius: 5px;
}

通过组合这些方法，可以创建从简单到复杂的各种表格样式。实际开发时可根据设计需求调整颜色、间距等参数。

标签: css