CSS 大师秘籍 | 一招让表格内容居于天地四方

2023-09-09 13:32:52

CSS 表格居中秘籍

表格是网页设计中不可或缺的元素，它们用于组织和展示数据。然而，让表格在页面上居中却往往是一个难题。别担心！通过巧妙运用 CSS，你可以轻松地让表格在任何屏幕尺寸下完美居中。

水平居中

margin: auto;

最简单的水平居中方法是使用 margin: auto; 属性。它告诉浏览器在左右两侧为表格分配相等的边距，从而将其居中。

table {
  margin: auto;
}

垂直居中

text-align: center;

要垂直居中表格内容，可以使用 text-align: center; 属性。它将单元格内的文本水平居中，让表格看起来整洁有序。

td, th {
  text-align: center;
}

vertical-align: middle;

如果表格包含不同高度的元素，可以使用 vertical-align: middle; 属性来垂直居中这些元素。它将单元格内的高度不一致内容垂直居中。

td, th {
  vertical-align: middle;
}

灵活布局

display: flex;

对于更复杂的表格布局，display: flex; 属性可以实现更灵活的排列方式。它将表格内容按照水平方向排列，并根据可用空间进行调整。

table {
  display: flex;
}

align-items: center;

要垂直居中表格内容，可以使用 align-items: center; 属性。它将表格内容在垂直方向上居中，不管内容高度如何。

table {
  align-items: center;
}

justify-content: center;

要水平居中表格内容，可以使用 justify-content: center; 属性。它将表格内容在水平方向上居中，不管内容宽度如何。

table {
  justify-content: center;
}

美观调整

padding 和 border

padding 和 border 属性可以为表格添加边框和间距，使表格更加美观。

td, th {
  padding: 10px;
  border: 1px solid #ccc;
}

cellspacing 和 cellpadding

cellspacing 和 cellpadding 属性可以调整表格单元格之间的间距，使表格更加紧凑或宽松。

table {
  cellspacing: 0;
  cellpadding: 10px;
}

实战演练

以下是使用这些 CSS 技巧居中表格的一个示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      margin: auto;
    }

    td, th {
      text-align: center;
      vertical-align: middle;
      padding: 10px;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </table>
</body>
</html>