CSS 表格（Tables） 8

WEI_Gaot
126 阅读10分钟

核心表格属性:

  1. display (应用于表格相关元素)

    • 作用: CSS 通过 display 属性的不同值来定义元素的表格布局行为。HTML 表格元素有默认的 display 值，但你也可以将其他元素设置为这些值来模拟表格布局（虽然现在有了 Grid 和 Flexbox，这种做法已不太常见）。

    • 表格相关值:

      • table: 使元素表现得像 <table> 元素（块级）。
      • inline-table: 使元素表现得像 <table> 元素，但为行内级。
      • table-row: 使元素表现得像 <tr> 元素。
      • table-cell: 使元素表现得像 <td> 或 <th> 元素。
      • table-header-group: 使元素表现得像 <thead> 元素。
      • table-footer-group: 使元素表现得像 <tfoot> 元素。
      • table-row-group: 使元素表现得像 <tbody> 元素。
      • table-column: 使元素表现得像 <col> 元素。
      • table-column-group: 使元素表现得像 <colgroup> 元素。
      • table-caption: 使元素表现得像 <caption> 元素。

    • 注意: 使用这些值时，元素内部会隐式创建所需的匿名表格对象（例如，display: table; 的元素如果直接包含 display: table-cell; 的子元素，浏览器会自动插入一个匿名的 display: table-row;）。

  2. border-collapse (应用于 <table> 元素)

    • 作用: 控制表格的边框是合并为单一边框，还是像标准盒模型一样分离。

    • 值:

      • separate: (默认值) 边框分离。每个单元格拥有独立的边框。单元格间距由 border-spacing 控制。
      • collapse: 边框合并。相邻单元格共享边框，border-spacing 和 empty-cells 属性会被忽略。这是更常见的样式。

    • 示例: table { border-collapse: collapse; }

  3. border-spacing (应用于 <table> 元素)

    • 作用: 当 border-collapse 为 separate 时，指定相邻单元格边框之间的距离。如果只提供一个值，则水平和垂直间距相同；如果提供两个值，第一个是水平间距，第二个是垂直间距。
    • 值: <length> [<length>]? (如 2px, 5px 10px)。不允许使用百分比。
    • 注意: 此属性仅在 border-collapse: separate; 时生效。
    • 示例: table { border-collapse: separate; border-spacing: 5px; }

  4. caption-side (应用于 <table> 或 display: table-caption 的元素)

    • 作用: 指定表格标题 (<caption> 元素) 相对于表格的位置。

    • 值:

      • top: (默认值) 标题显示在表格上方。
      • bottom: 标题显示在表格下方。
      • left, right: （实验性，支持不广泛）标题显示在表格左侧或右侧。
      • top-outside, bottom-outside: （用于 writing-mode 相关的块级排列）

    • 示例: caption { caption-side: bottom; }

  5. empty-cells (应用于 <table> 或 display: table-cell 的元素)

    • 作用: 控制当单元格内容为空时，是否显示该单元格的边框和背景。

    • 值:

      • show: (默认值) 显示空单元格的边框和背景。
      • hide: 不显示空单元格的边框和背景。

    • 注意: 此属性仅在 border-collapse: separate; 时生效。在 collapse 模式下，空单元格的行为与其他单元格一致。

    • 示例: table { border-collapse: separate; empty-cells: hide; }

  6. table-layout (应用于 <table> 元素)

    • 作用: 定义用于布局表格单元格、行和列的算法。

    • 值:

      • auto: (默认值) 自动表格布局算法。列宽由其内容（如最宽的单元格）决定。计算可能较慢，因为需要读取所有内容才能确定最终布局。
      • fixed: 固定表格布局算法。表格和列的宽度取决于表格的宽度、width 属性设置，以及列、单元格或 col 元素的宽度（通常基于第一行）。内容溢出时不会改变列宽。渲染速度通常更快。

    • 示例: table { table-layout: fixed; width: 100%; } (常用于创建宽度固定的表格，即使内容很长也不会撑开列宽)

与表格单元格 (<td>, <th> 或 display: table-cell) 相关的常用 CSS 属性:

虽然这些不是专门的表格属性，但在设置表格单元格样式时非常重要：

  • padding: 控制单元格内容与单元格边框之间的距离。
  • border: 设置单元格的边框 (在 border-collapse: collapse 时会与其他单元格合并)。
  • width / height: 可以为单元格设置宽度和高度（尤其是在 table-layout: fixed 时效果更明显）。
  • text-align: 控制单元格内容的水平对齐 (left, center, right, justify)。<th> 默认通常是 center。
  • vertical-align: 控制单元格内容的垂直对齐 (top, middle, bottom, baseline)。这是表格布局中非常有用的属性。<th> 和 <td> 默认通常是 middle。
  • white-space: 控制单元格内容是否换行 (nowrap 可以防止内容换行)。
  • background-color: 设置单元格的背景色。

与表格行 (<tr> 或 display: table-row) 相关的常用 CSS 属性:

  • background-color: 可以为整行设置背景色。
  • height: 可以尝试设置行高，但实际高度通常由单元格内容和表格布局算法决定。

与表格列 (<col>, <colgroup> 或 display: table-column/table-column-group) 相关的常用 CSS 属性:

和 主要用于对列进行分组和设置共享样式，但它们能接受的 CSS 属性**非常有限**，主要是：
  • width: 设置列的宽度 (在 table-layout: fixed 时非常有用)。
  • background-color: 设置列的背景色 (如果单元格和行没有设置背景色，会显示列的背景色)。
  • border: （非常有限的支持）在 border-collapse: collapse 模式下，可以影响列的边框，但通常效果不直观，不推荐主要依赖此方式设置列边框。
  • visibility: collapse; : （应用于 <col> 或 <colgroup>）可以隐藏整个列（类似于 display: none，但会保留空间计算可能）。

总结表格属性:

属性应用于主要作用常用值
display任意元素模拟表格布局行为table, table-row, table-cell, inline-table 等
border-collapse<table>控制边框是合并还是分离collapse (常用), separate (默认)
border-spacing<table> (当 collapse 为 separate)设置分离边框时单元格间距<length> [<length>]? 如 2px, 5px 10px
caption-side<caption>, display: table-caption设置表格标题位置top (默认), bottom
empty-cells<table>, display: table-cell (当 collapse 为 separate)控制是否显示空单元格边框/背景show (默认), hide
table-layout<table>定义表格布局算法 (影响宽度计算和渲染速度)auto (默认), fixed (常用)
vertical-align<td>, <th>, display: table-cell控制单元格内容垂直对齐top, middle (默认), bottom, baseline
width (用于列)<col>, <colgroup>设置列宽度 (尤其在 table-layout: fixed 时有效)<length>, <percentage>

案例 1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 表格属性示例</title>
    <link rel="stylesheet" href="11.css">
</head>
<body>

    <h1>CSS 表格属性演示</h1>

    <!-- 示例 1: 边框样式 (border-collapse, border-spacing) -->
    <section>
        <h2>边框样式 (<code>border-collapse</code>, <code>border-spacing</code>)</h2>
        <h3>边框合并 (<code>collapse</code>) - 默认且常用</h3>
        <table class="table-style-collapse">
            <caption>边框合并示例</caption>
            <tr> <th>标题 1</th> <th>标题 2</th> </tr>
            <tr> <td>数据 1A</td> <td>数据 1B</td> </tr>
            <tr> <td>数据 2A</td> <td></td> </tr> <!-- 空单元格 -->
        </table>

        <h3>边框分离 (<code>separate</code>) 与间距</h3>
        <table class="table-style-separate">
            <caption>边框分离示例</caption>
            <tr> <th>标题 1</th> <th>标题 2</th> </tr>
            <tr> <td>数据 1A</td> <td>数据 1B</td> </tr>
            <tr> <td>数据 2A</td> <td></td> </tr> <!-- 空单元格 -->
        </table>
    </section>

    <!-- 示例 2: 表格标题与空单元格 (caption-side, empty-cells) -->
    <section>
        <h2>表格标题与空单元格 (<code>caption-side</code>, <code>empty-cells</code>)</h2>
        <table class="table-caption-styling">
            <caption class="caption-style">标题在底部，隐藏空单元格</caption>
            <tr> <th>ID</th> <th>名称</th> <th>备注</th> </tr>
            <tr> <td>1</td> <td>项目 A</td> <td>正常</td> </tr>
            <tr> <td>2</td> <td></td> <td>空名称</td> </tr> <!-- 名称为空 -->
            <tr> <td>3</td> <td>项目 C</td> <td></td> </tr> <!-- 备注为空 -->
        </table>
    </section>

    <!-- 示例 3: 表格布局算法 (table-layout) -->
    <section>
        <h2>表格布局算法 (<code>table-layout</code>)</h2>
        <h3>自动布局 (<code>auto</code>) - 默认</h3>
        <table class="table-layout-auto">
            <caption>自动布局</caption>
            <colgroup> <col style="width: 10%;"> <col> <col style="width: 20%;"> </colgroup>
            <tr> <th>短标题</th> <th>一个非常非常非常长的标题会影响列宽计算</th> <th>状态</th> </tr>
            <tr> <td>ID-1</td> <td>短内容</td> <td>OK</td> </tr>
            <tr> <td>ID-2</td> <td>内容内容内容内容内容内容内容内容内容内容</td> <td>Pending</td> </tr>
        </table>

        <h3>固定布局 (<code>fixed</code>)</h3>
        <table class="table-layout-fixed">
            <caption>固定布局</caption>
             <colgroup> <col style="width: 10%;"> <col style="width: 60%;"> <col style="width: 30%;"> </colgroup>
            <tr> <th>短标题</th> <th>一个非常非常非常长的标题不会影响列宽计算，但内容可能溢出</th> <th>状态</th> </tr>
            <tr> <td>ID-1</td> <td>短内容</td> <td>OK</td> </tr>
            <tr> <td>ID-2</td> <td>内容内容内容内容内容内容内容内容内容内容</td> <td>Pending</td> </tr>
        </table>
    </section>

    <!-- 示例 4: 单元格对齐 (vertical-align, text-align) -->
    <section>
        <h2>单元格对齐 (<code>vertical-align</code>, <code>text-align</code>)</h2>
        <table class="table-cell-alignment">
            <caption>单元格对齐</caption>
            <tr>
                <td class="align-v-top">垂直顶部</td>
                <td class="align-v-middle">垂直居中 (默认)<br>多行测试<br>内容</td>
                <td class="align-v-bottom">垂直底部</td>
            </tr>
            <tr>
                <td class="align-h-left">水平左对齐 (默认)</td>
                <td class="align-h-center">水平居中</td>
                <td class="align-h-right">水平右对齐</td>
            </tr>
             <tr>
                <td class="align-v-top align-h-right">右上对齐</td>
                <td class="align-v-middle align-h-center">水平垂直居中</td>
                <td class="align-v-bottom align-h-left">左下对齐</td>
            </tr>
        </table>
    </section>

     <!-- 示例 5: 列样式 (colgroup/col) -->
    <section>
        <h2>列样式 (<code>colgroup</code>/<code>col</code>)</h2>
        <table class="table-column-style">
            <caption>列样式 (背景, 宽度, 可见性)</caption>
            <colgroup>
                <col span="1" style="background-color: #f0e68c;"> <!-- 第一列背景 Khaki -->
                <col style="width: 50%;"> <!-- 第二列宽度 -->
                <col style="visibility: collapse;"> <!-- 第三列隐藏 -->
            </colgroup>
            <thead>
                 <tr> <th>列 1 (有背景)</th> <th>列 2 (50% 宽)</th> <th>列 3 (隐藏)</th> <th>列 4</th></tr>
            </thead>
            <tbody>
                <tr> <td>Data A1</td> <td>Data A2</td> <td>Data A3</td> <td>Data A4</td> </tr>
                <tr> <td>Data B1</td> <td>Data B2</td> <td>Data B3</td> <td>Data B4</td> </tr>
            </tbody>
        </table>
    </section>

</body>
</html>

    
    /*11.css */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    line-height: 1.5;
}

h1, h2, h3 {
    margin-bottom: 0.8em;
}
h1 { text-align: center; color: #333; }
h2 { margin-top: 2em; border-bottom: 1px solid #ccc; padding-bottom: 0.3em; color: #555; }
h3 { margin-top: 1.5em; font-size: 1.1em; color: #666; }

table {
    width: 100%;          /* 表格宽度 */
    border: 1px solid #999; /* 表格外边框 (在 separate 模式下可见) */
    margin-bottom: 1.5em;
    /* border-collapse 在具体示例中设置 */
}

caption {
    padding: 0.5em;
    font-weight: bold;
    font-style: italic;
    /* caption-side 在具体示例中设置 */
}

th, td {
    border: 1px solid #ccc; /* 单元格边框 */
    padding: 0.6em 0.8em;   /* 单元格内边距 */
    text-align: left;     /* 默认水平对齐 */
    vertical-align: middle; /* 默认垂直对齐 */
}

thead th {
    background-color: #e9e9e9; /* 表头背景 */
    font-weight: bold;
    text-align: center;      /* 表头默认居中 */
}

tbody tr:nth-child(odd) {
    background-color: #f8f8f8; /* 斑马条纹 */
}

tbody tr:hover {
    background-color: #eaeaea; /* 悬停高亮 */
}

/* === 示例 1: 边框样式 === */
.table-style-collapse {
    border-collapse: collapse;
}
/* 在 collapse 模式下, border-spacing 和 empty-cells 无效 */
/* 边框会合并 */

.table-style-separate {
    border-collapse: separate;
    border-spacing: 5px; /* 设置单元格间距 */
    border: 2px solid navy; /* 强调外部边框 */
}
.table-style-separate th,
.table-style-separate td {
    border-radius: 4px; /* 分离模式下可以给单元格设置圆角 */
}

/* === 示例 2: 表格标题与空单元格 === */
.table-caption-styling {
    border-collapse: separate; /* empty-cells 需要 separate 模式 */
    empty-cells: hide;       /* 隐藏空单元格的边框和背景 */
    border-spacing: 1px;
}
.caption-style {
    caption-side: bottom;      /* 标题在底部 */
    margin-top: 0.5em;       /* 标题和表格间加点距离 */
    color: steelblue;
}

/* === 示例 3: 表格布局算法 === */
.table-layout-auto {
    table-layout: auto; /* 默认，列宽受内容影响 */
}

.table-layout-fixed {
    table-layout: fixed; /* 固定布局，列宽主要由表格宽度和 col/th/td 宽度决定 */
    border-collapse: collapse;
}
.table-layout-fixed th,
.table-layout-fixed td {
    /* 配合 fixed 布局处理内容溢出 */
    overflow: hidden;         /* 隐藏溢出内容 */
    white-space: nowrap;      /* 强制不换行 */
    text-overflow: ellipsis;  /* 显示省略号 */
}

/* === 示例 4: 单元格对齐 === */
.table-cell-alignment {
    border-collapse: collapse;
}
.table-cell-alignment td {
    height: 80px; /* 设置固定高度以观察垂直对齐效果 */
}
/* 垂直对齐 */
.align-v-top { vertical-align: top; }
.align-v-middle { vertical-align: middle; } /* 默认 */
.align-v-bottom { vertical-align: bottom; }
/* 水平对齐 */
.align-h-left { text-align: left; } /* 默认 */
.align-h-center { text-align: center; }
.align-h-right { text-align: right; }

/* 组合对齐 */
.align-v-top.align-h-right { vertical-align: top; text-align: right; background-color: lightpink; }
.align-v-middle.align-h-center { vertical-align: middle; text-align: center; background-color: lightgreen; }
.align-v-bottom.align-h-left { vertical-align: bottom; text-align: left; background-color: lightblue; }

/* === 示例 5: 列样式 === */
.table-column-style {
    border-collapse: collapse;
}
/* col 的样式已在 HTML 中通过 style 属性设置 */
/* 注意：col 能接受的 CSS 属性有限，主要是 width, background, border, visibility */
/* 例如，不能直接通过 col 设置 padding 或 text-align */

案例 2

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>复杂表格示例</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      padding: 20px;
      background-color: #f8f9fa;
    }

    .table-container {
      overflow-x: auto;
      background-color: white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      padding: 10px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 800px;
    }

    caption {
      caption-side: top;
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 10px;
    }

    thead {
      background-color: #343a40;
      color: #fff;
    }

    th, td {
      padding: 12px 16px;
      border: 1px solid #dee2e6;
      text-align: center;
    }

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

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

    .highlight {
      font-weight: bold;
      color: #d32f2f;
    }

    .footer {
      background-color: #e9ecef;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <div class="table-container">
    <table>
      <caption>2025 学年上学期 学生成绩汇总</caption>
      <thead>
        <tr>
          <th rowspan="2">年级</th>
          <th rowspan="2">班级</th>
          <th rowspan="2">姓名</th>
          <th colspan="3">成绩（分）</th>
          <th rowspan="2">总分</th>
          <th rowspan="2">排名</th>
        </tr>
        <tr>
          <th>语文</th>
          <th>数学</th>
          <th>英语</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">高一</td>
          <td rowspan="2">1班</td>
          <td>张三</td>
          <td>89</td>
          <td>93</td>
          <td>85</td>
          <td class="highlight">267</td>
          <td>1</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>80</td>
          <td>85</td>
          <td>87</td>
          <td class="highlight">252</td>
          <td>2</td>
        </tr>
        <tr>
          <td rowspan="2">高一</td>
          <td rowspan="2">2班</td>
          <td>王五</td>
          <td>78</td>
          <td>88</td>
          <td>90</td>
          <td class="highlight">256</td>
          <td>1</td>
        </tr>
        <tr>
          <td>赵六</td>
          <td>90</td>
          <td>79</td>
          <td>84</td>
          <td class="highlight">253</td>
          <td>2</td>
        </tr>
      </tbody>
      <tfoot>
        <tr class="footer">
          <td colspan="3">平均分</td>
          <td>84.25</td>
          <td>86.25</td>
          <td>86.5</td>
          <td>257</td>
          <td>-</td>
        </tr>
      </tfoot>
    </table>
  </div>

</body>
</html>
avatar
文章
阅读
粉丝