在线css 表格制作

CSS 表格制作方法

使用 CSS 可以创建美观且响应式的表格，以下是几种常见的实现方式：

基础表格样式

通过 table、th、td 标签结合 CSS 定义边框、间距和颜色：

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</table>

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

斑马纹表格

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

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

响应式表格

在小屏幕设备上添加横向滚动：

div.table-container {
  overflow-x: auto;
}

悬停效果

为行添加悬停高亮：

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

在线工具推荐

1. CSS-Tricks 表格生成器
   提供可视化界面调整表格样式并生成代码。

2. CodePen
   搜索 "CSS Table" 模板，可直接修改和预览效果。

   

3. Table Generator
   支持通过 GUI 设计表格后导出 HTML/CSS 代码。

进阶技巧

• 使用 box-shadow 添加卡片式阴影效果：

  table {
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  }

• 固定表头实现滚动时标题保持可见：

  thead th {
  position: sticky;
  top: 0;
  }

• 通过 colgroup 设置列宽：

  <colgroup>
  <col style="width: 30%">
  <col style="width: 70%">
  </colgroup>