当前位置：首页 > CSS

css制作表格模板

2026-04-02 08:25:44CSS

CSS 制作表格模板

使用 CSS 可以灵活地设计表格样式，包括边框、背景、对齐方式等。以下是一些常用的 CSS 表格模板示例。

基础表格样式

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

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

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

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

tr:hover {
  background-color: #e9e9e9;
}

斑马线表格

通过 nth-child 选择器实现交替行背景色。

css制作表格模板

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 12px;
  border: 1px solid #ddd;
}

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

tr:nth-child(odd) {
  background-color: #f2f2f2;
}

响应式表格

在小屏幕设备上通过水平滚动显示表格内容。

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  border: 1px solid #ddd;
}

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

圆角边框表格

为表格添加圆角边框效果。

css制作表格模板

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

th, td {
  padding: 10px;
  border: 1px solid #ddd;
}

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

悬停高亮行

鼠标悬停时高亮显示当前行。

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 12px;
  border: 1px solid #ddd;
}

tr:hover {
  background-color: #f5f5f5;
  transition: background-color 0.3s;
}

固定表头表格

滚动表格内容时保持表头固定。

.table-container {
  height: 300px;
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  position: sticky;
  top: 0;
  background-color: #4CAF50;
  color: white;
}

th, td {
  padding: 10px;
  border: 1px solid #ddd;
}

使用说明

将 CSS 代码添加到 <style> 标签或外部 CSS 文件中。
确保 HTML 表格结构正确，例如：

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>