当前位置：首页 > CSS

css制作表格

2026-01-14 11:32:00CSS

CSS 制作表格的方法

使用 CSS 可以灵活地创建和样式化表格，以下是几种常见的方法：

使用 HTML 表格标签结合 CSS 样式

通过 HTML 的 <table>、<tr>、<th>、<td> 标签创建表格结构，再用 CSS 控制样式。

<table class="custom-table">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

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

.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;
}

使用 CSS Grid 布局模拟表格

CSS Grid 可以完全控制布局，适合需要高度自定义的场景。

<div class="grid-table">
  <div class="header">Header 1</div>
  <div class="header">Header 2</div>
  <div class="cell">Data 1</div>
  <div class="cell">Data 2</div>
</div>

.grid-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background-color: #ddd;
}

.grid-table .header, .grid-table .cell {
  padding: 8px;
  background-color: white;
}

.grid-table .header {
  font-weight: bold;
  background-color: #f2f2f2;
}

使用 Flexbox 布局模拟表格

Flexbox 适合简单的表格布局，尤其是列数固定的情况。

<div class="flex-table">
  <div class="row">
    <div class="cell header">Header 1</div>
    <div class="cell header">Header 2</div>
  </div>
  <div class="row">
    <div class="cell">Data 1</div>
    <div class="cell">Data 2</div>
  </div>
</div>

.flex-table {
  width: 100%;
}

.flex-table .row {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.flex-table .cell {
  flex: 1;
  padding: 8px;
}

.flex-table .header {
  font-weight: bold;
  background-color: #f2f2f2;
}

响应式表格设计

针对移动设备，可以通过媒体查询调整表格布局。

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

表格样式增强

通过 CSS 可以添加悬停效果、斑马纹等交互样式。

css制作表格

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

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

这些方法可以根据具体需求选择，HTML 表格标签适合传统表格布局，CSS Grid 和 Flexbox 适合更灵活的现代布局设计。

标签: 表格 css

分享给朋友：

制作 .css

创建 CSS 文件的基本步骤新建一个文本文件，将其保存为 .css 扩展名（例如 style.css）。使用纯文本编辑器（如 Notepad++、VS Code 或 Sublime Text）编写…

风车制作css

风车制作CSS方法使用CSS创建风车效果可以通过动画和变换属性实现。以下是一个简单的风车旋转动画示例： HTML结构 <div class="windmill"> <div…

css菜单制作

CSS 菜单制作方法水平导航菜单使用 display: inline-block 或 flexbox 可以轻松创建水平导航菜单。以下是一个基本示例： <nav> <ul c…

css制作菜单

CSS 制作菜单的方法使用 CSS 可以制作多种风格的菜单，包括水平菜单、垂直菜单、下拉菜单等。以下是几种常见的实现方式。水平菜单水平菜单通常用于导航栏，可以通过 display: inlin…

css制作导航栏

水平导航栏使用 display: inline-block 或 flexbox 创建水平导航栏是最常见的方法。 <nav class="horizontal-nav"> <u…

css导航条制作

水平导航条制作使用display: inline-block或flexbox布局创建水平导航条。设置背景色、内边距和悬停效果增强交互性。 <nav> <ul class="h…

css制作表格