当前位置：首页 > CSS

css 制作表格

2026-02-26 20:26:16CSS

CSS 制作表格的基本方法

使用 CSS 制作表格可以通过原生 HTML 表格标签或纯 CSS 实现灵活布局。以下是两种常见方式：

使用 HTML 表格标签 + CSS 样式

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

.custom-table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
}
.custom-table th, .custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.custom-table th {
  background-color: #f2f2f2;
}
.custom-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

使用 DIV 模拟表格（CSS Grid）

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

.grid-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.grid-table .header, .grid-table .row {
  display: contents;
}
.grid-table .header > div {
  background: #f2f2f2;
  font-weight: bold;
}
.grid-table > div > div {
  padding: 8px;
  border: 1px solid #ddd;
}

响应式表格实现

当屏幕宽度不足时，可通过媒体查询改变布局方式：

css 制作表格

@media (max-width: 600px) {
  .custom-table thead { display: none; }
  .custom-table tr {
    display: block;
    margin-bottom: 10px;
  }
  .custom-table td {
    display: block;
    text-align: right;
  }
  .custom-table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

表格美化技巧

斑马纹效果：

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

悬停高亮：
```
tr:hover { background: #e6f7ff; }
```
固定表头：
```
thead th {
position: sticky;
top: 0;
}
```

圆角边框：

table { border-radius: 5px; overflow: hidden; }

通过组合这些 CSS 特性，可以创建既美观又功能完善的表格布局。实际应用中需根据内容结构和设计需求选择合适方案。

标签: 表格 css

分享给朋友：

css怎么制作表格

使用HTML和CSS创建表格 HTML提供<table>标签用于创建表格结构，结合CSS可以自定义样式。以下是基本实现方法： HTML结构 <table> <th…

制作css选择器

CSS选择器基础语法 CSS选择器用于定位HTML文档中的元素，以便为其应用样式。常见的基础选择器包括：元素选择器：直接使用HTML标签名（如p、div）类选择器：以.开头（如.header）…

css怎么制作个人主页

设计布局结构使用CSS的Flexbox或Grid布局创建响应式结构。Flexbox适合一维排列（如导航栏），Grid适合二维布局（如整体页面分区）。例如： .container { displ…

css熊猫制作

使用CSS绘制熊猫的步骤创建一个熊猫的CSS图形需要利用CSS的border-radius、box-shadow等属性来构建圆形和椭圆形元素。以下是实现方法： HTML结构 <div cl…

vue实现表格读取数据

Vue 实现表格数据读取在 Vue 中实现表格数据读取通常涉及以下关键步骤：数据绑定与表格渲染通过 v-for 指令动态渲染表格行，数据通常存储在组件的 data 或 Vuex 状态中： &…

css模板制作

CSS 模板制作方法制作 CSS 模板的核心是设计一套可复用的样式规则，适用于多种网页或项目。以下是具体方法：定义基础样式设置全局默认样式，包括字体、颜色、边距等。例如： body {…

css 制作表格