将 HTML 表格标题浮动到表格右侧答案

【问题标题】：Float HTML table caption to the right of table将 HTML 表格标题浮动到表格右侧
【发布时间】：2023-03-21 10:28:01
【问题描述】：

如何将表格标题浮动到表格的右侧？标题应出现在表格右侧并与表格顶部对齐。

下面的代码将标题放在表格的第一列。

table > caption {
  color: red;
  display: block;
  float: right;
  clear: right;
}

<table>
  <caption>This is a table caption</caption>
  <thead>
    <tr>
      <th scope="col">Value</th>
      <th scope="col">Text</th>
      <th scope="col">Numbers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>value 1</td>
      <td>Nam a sapien.</td>
      <td>1.23</td>
    </tr>

    <tr>
      <td>value 2</td>
      <td>Nunc rutrum turpis sed pede.</td>
      <td>34.56</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

标签： html css html-table css-tables caption

【解决方案1】：

你不能真正让内部元素浮出它的容器，但你可以用定位来做一些 css 魔法:)

检查这个例子：

table {
  position: relative;
}
table > caption {
  color: red;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
}

<table>
  <caption>This is a table caption</caption>
  <thead>
    <tr>
      <th scope="col">Value</th>
      <th scope="col">Text</th>
      <th scope="col">Numbers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>value 1</td>
      <td>Nam a sapien.</td>
      <td>1.23</td>
    </tr>

    <tr>
      <td>value 2</td>
      <td>Nunc rutrum turpis sed pede.</td>
      <td>34.56</td>
    </tr>
  </tbody>
</table>

在 chrome/firefox/ie11 中签入

这是我在那里所做的解释：

确保表格是一个位置，以便我可以将标题放在已知位置。
将标题绝对放置在表格的右上角。
将标题向右移动 100%（其宽度）（使用 translateX(100%)）。

【讨论】：

【解决方案2】：

哎呀！我认为 OP 想要 <caption> 垂直。哦，好吧，我会把它留在这里以防万一有人想要垂直的<caption>。它旋转了 90%，因此定位它变得很棘手。 <caption> 设置为white-space:nowrap，因为两行或更多行将所有内容都抛出。 transform-origin: right bottom 很棘手，TBH 我不完全理解它，我所知道的就是在使用transform 时使用它，结果几乎就在那里但并不完全。就像 Dekel 已经提到的那样，<caption> 需要 position:absolute，<table> 需要 relative。

片段

table {
  position:relative;
  border: 1px solid grey;
}
table > caption {
  color: red;
  transform-origin: right bottom;
  transform: rotate(90deg);
  white-space: nowrap;
  position: absolute;
  left: 50%;
  bottom:-130px;
  padding:0 0 0 40px;
}

<table>
  <caption>This is a table caption</caption>
  <thead>
    <tr>
      <th scope="col">Value</th>
      <th scope="col">Text</th>
      <th scope="col">Numbers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>value 1</td>
      <td>Nam a sapien.</td>
      <td>1.23</td>
    </tr>

    <tr>
      <td>value 2</td>
      <td>Nunc rutrum turpis sed pede.</td>
      <td>34.56</td>
    </tr>
  </tbody>
</table>

【讨论】：