制作css表格

2026-04-01 02:23:45CSS

基础CSS表格结构

使用HTML的<table>标签创建表格结构，配合CSS设置样式。以下是一个基础示例：

<table class="styled-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>

常用CSS样式设置

通过CSS控制表格外观，以下为常见样式属性：

制作css表格

.styled-table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  margin: 25px 0;
  font-size: 0.9em;
  font-family: sans-serif;
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

.styled-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}

.styled-table th,
.styled-table td {
  padding: 12px 15px;
}

.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.styled-table tbody tr:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}

响应式表格设计

针对移动设备优化表格显示：

制作css表格

@media screen and (max-width: 600px) {
  .responsive-table {
    display: block;
    width: 100%;
  }

  .responsive-table thead {
    display: none;
  }

  .responsive-table tbody tr {
    margin-bottom: 15px;
    display: block;
    border: 1px solid #ddd;
  }

  .responsive-table td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }

  .responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    font-weight: bold;
  }
}

高级样式技巧

实现斑马纹、悬停效果等增强体验：

.zebra-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 5px;
  overflow: hidden;
}

.zebra-table tr:nth-child(odd) {
  background-color: #f8f8f8;
}

.highlight-table tr:hover {
  background-color: #e6f7ff;
  transition: background-color 0.3s ease;
}

.border-table {
  border: 1px solid #dee2e6;
}

.border-table th, 
.border-table td {
  border: 1px solid #dee2e6;
}

表格布局控制

调整表格布局方式：

.fixed-layout {
  table-layout: fixed;
}

.auto-layout {
  table-layout: auto;
}

.col-width-1 {
  width: 20%;
}

.col-width-2 {
  width: 30%;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}