如何使用 CSS 将标题放在表格下方？(1)

📌 相关文章

📜 如何使用 CSS 将标题放在表格下方？(1)

📅 最后修改于: 2023-12-03 15:23:50.598000 🧑 作者: Mango

如何使用 CSS 将标题放在表格下方？

在一些商业网站中，我们可能需要在表格下方添加一个标题。默认情况下，表格上方是一个标题。但是，有时我们需要将标题放置在表格下方，为此，我们可以使用 CSS 来实现。

步骤

首先，在 HTML 文件中添加表格和标题。

<h1>这是一个表格下方的标题</h1>

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

接下来，我们需要使用 CSS 将标题放置在表格下方。我们可以使用 position 属性来控制标题的位置。设置 position: absolute; 可以让元素脱离文档流，因此不受其他元素影响。

h1 {
  position: absolute;
  text-align: center;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

最后，我们需要为表格添加一个 margin-bottom 的值，以确保标题和表格之间有足够的距离。

table {
  margin-bottom: 40px;
}

这样就可以将表格下方的标题添加到网页中。

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>标题在表格下方</title>
  <style>
    h1 {
      position: absolute;
      text-align: center;
      bottom: 100%;
      left: 50%;
      transform: translate(-50%, 0);
    }

    table {
      margin-bottom: 40px;
    }
  </style>
</head>
<body>
  <h1>这是一个表格下方的标题</h1>

  <table>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </table>
</body>
</html>

代码中的效果为：

这是一个表格下方的标题

表头1	表头2
内容1	内容2
内容3	内容4