Web学习网站

Appearance

CSS 表格样式 ​

CSS 表格样式属性用于控制 HTML 表格元素（如 <table>、<thead>、<tbody>、<tr>、<th>、<td> 等）的外观和布局。

表格相关属性 ​

border-collapse ​

border-collapse 属性控制表格边框是合并还是分离。

css
.collapsed {
  border-collapse: collapse; /* 边框合并（默认） */
}

.separated {
  border-collapse: separate; /* 边框分离 */
}

border-spacing ​

border-spacing 属性设置分离边框之间的距离。

css
.spaced {
  border-collapse: separate;
  border-spacing: 10px; /* 水平和垂直间距相同 */
}

.different-spacing {
  border-collapse: separate;
  border-spacing: 10px 5px; /* 水平间距 10px，垂直间距 5px */
}

caption-side ​

caption-side 属性设置表格标题的位置。

css
.caption-top {
  caption-side: top; /* 标题在顶部（默认） */
}

.caption-bottom {
  caption-side: bottom; /* 标题在底部 */
}

empty-cells ​

empty-cells 属性控制是否显示空单元格的边框和背景。

css
.show-empty {
  empty-cells: show; /* 显示空单元格（默认） */
}

.hide-empty {
  empty-cells: hide; /* 隐藏空单元格 */
}

table-layout ​

table-layout 属性设置表格的布局算法。

css
.auto-layout {
  table-layout: auto; /* 自动布局（默认） */
}

.fixed-layout {
  table-layout: fixed; /* 固定布局 */
}

实际示例 ​

基本表格样式 ​

html
<table class="basic-table">
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>数学</th>
      <th>英语</th>
      <th>科学</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>90</td>
      <td>85</td>
      <td>88</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>78</td>
      <td>92</td>
      <td>85</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>95</td>
      <td>87</td>
      <td>90</td>
    </tr>
  </tbody>
</table>
css
.basic-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.basic-table caption {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
}

.basic-table th,
.basic-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.basic-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

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

无边框表格 ​

html
<table class="borderless-table">
  <thead>
    <tr>
      <th>产品</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>笔记本电脑</td>
      <td>¥5999</td>
      <td>15</td>
    </tr>
    <tr>
      <td>智能手机</td>
      <td>¥2999</td>
      <td>32</td>
    </tr>
    <tr>
      <td>平板电脑</td>
      <td>¥1999</td>
      <td>8</td>
    </tr>
  </tbody>
</table>
css
.borderless-table {
  width: 100%;
  border-collapse: collapse;
}

.borderless-table th,
.borderless-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.borderless-table th {
  border-bottom: 2px solid #3498db;
  background-color: #f8f9fa;
  font-weight: 600;
}

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

条纹表格 ​

html
<table class="striped-table">
  <thead>
    <tr>
      <th>员工</th>
      <th>部门</th>
      <th>职位</th>
      <th>入职日期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>技术部</td>
      <td>前端工程师</td>
      <td>2022-01-15</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>设计部</td>
      <td>UI设计师</td>
      <td>2021-11-20</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>市场部</td>
      <td>市场专员</td>
      <td>2023-03-10</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>人事部</td>
      <td>HR专员</td>
      <td>2022-07-05</td>
    </tr>
  </tbody>
</table>
css
.striped-table {
  width: 100%;
  border-collapse: collapse;
}

.striped-table th,
.striped-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.striped-table th {
  background-color: #3498db;
  color: white;
}

.striped-table tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

.striped-table tbody tr:hover {
  background-color: #e8f4f8;
}

带悬停效果的表格 ​

html
<table class="hover-table">
  <thead>
    <tr>
      <th>国家</th>
      <th>首都</th>
      <th>人口</th>
      <th>面积</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>中国</td>
      <td>北京</td>
      <td>14亿</td>
      <td>960万平方公里</td>
    </tr>
    <tr>
      <td>美国</td>
      <td>华盛顿</td>
      <td>3.3亿</td>
      <td>983万平方公里</td>
    </tr>
    <tr>
      <td>俄罗斯</td>
      <td>莫斯科</td>
      <td>1.4亿</td>
      <td>1710万平方公里</td>
    </tr>
  </tbody>
</table>
css
.hover-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.hover-table th,
.hover-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.hover-table th {
  background-color: #2c3e50;
  color: white;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hover-table tbody tr {
  transition: background-color 0.3s;
}

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

响应式表格 ​

<div class="table-container">
  <table class="responsive-table">
    <thead>
      <tr>
        <th>产品名称</th>
        <th>类别</th>
        <th>价格</th>
        <th>库存</th>
        <th>销量</th>
        <th>评分</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="产品名称">无线耳机</td>
        <td data-label="类别">电子产品</td>
        <td data-label="价格">¥299</td>
        <td data-label="库存">120</td>
        <td data-label="销量">850</td>
        <td data-label="评分">4.5</td>
      </tr>
      <tr>
        <td data-label="产品名称">智能手表</td>
        <td data-label="类别">穿戴设备</td>
        <td data-label="价格">¥1299</td>
        <td data-label="库存">45</td>
        <td data-label="销量">320</td>
        <td data-label="评分">4.2</td>
      </tr>
    </tbody>
  </table>
</div>
css
.table-container {
  overflow-x: auto;
}

.responsive-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.responsive-table th,
.responsive-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.responsive-table th {
  background-color: #34495e;
  color: white;
}

.responsive-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
  }

  .responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .responsive-table tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
  }

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

  .responsive-table td:before {
    content: attr(data-label) ": ";
    position: absolute;
    left: 10px;
    width: 45%;
    text-align: left;
    font-weight: bold;
  }
}

高级表格样式 ​

固定列宽表格 ​

``css .fixed-table { table-layout: fixed; width: 100%; }

.fixed-table th:first-child, .fixed-table td:first-child { width: 30%; }

.fixed-table th:nth-child(2), .fixed-table td:nth-child(2) { width: 20%; }

.fixed-table th:nth-child(3), .fixed-table td:nth-child(3) { width: 25%; }

.fixed-table th:last-child, .fixed-table td:last-child { width: 25%; }


### 带阴影的表格

``css
.shadow-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.shadow-table th,
.shadow-table td {
  padding: 15px;
  text-align: left;
}

.shadow-table th {
  background: linear-gradient(to bottom, #3498db, #2980b9);
  color: white;
  font-weight: normal;
}

.shadow-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

.shadow-table tbody tr:hover {
  background-color: #e3f2fd;
}

浏览器兼容性 ​

表格样式属性在所有现代浏览器中都有很好的支持：

  • IE 8+ 支持基本的表格样式属性
  • 所有现代浏览器支持完整的表格样式功能

最佳实践 ​

  1. 语义化：使用适当的表格元素和结构
  2. 可访问性：为屏幕阅读器用户提供适当的信息
  3. 响应式：确保表格在小屏幕上仍然可用
  4. 性能：避免在大表格上使用复杂的样式
  5. 一致性：在整个网站中保持表格样式的一致性

总结 ​

CSS 表格样式属性为我们提供了控制表格外观的强大工具。通过合理使用这些属性，可以创建各种视觉效果，从简单的边框样式到复杂的响应式设计。掌握这些属性对于前端开发人员来说是必不可少的技能。