当前位置：首页 > CSS

css制作的表格

2026-04-01 21:46:45CSS

CSS制作表格的方法

使用CSS可以灵活地控制表格的样式，包括边框、背景、对齐方式等。以下是几种常见的CSS表格制作方法：

基础表格样式

通过CSS为HTML的<table>元素添加样式：

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

.basic-table {
  width: 100%;
  border-collapse: collapse;
}
.basic-table th, .basic-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.basic-table th {
  background-color: #f2f2f2;
}

斑马条纹表格

使用:nth-child()选择器实现交替行颜色：

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

响应式表格

在小屏幕上让表格可横向滚动：

.responsive-table {
  overflow-x: auto;
}

无边框表格

创建现代简约风格的表格：

.borderless-table {
  border: none;
}
.borderless-table td, .borderless-table th {
  border: none;
  padding: 12px 15px;
}

悬停效果

为表格行添加悬停高亮：

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

使用CSS Grid创建表格布局

对于更灵活的布局，可以使用CSS Grid模拟表格：

css制作的表格

<div class="grid-table">
  <div class="header">标题1</div>
  <div class="header">标题2</div>
  <div class="cell">内容1</div>
  <div class="cell">内容2</div>
</div>

.grid-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.grid-table .header {
  font-weight: bold;
  padding: 10px;
  background: #eee;
}