在 table 右侧浮动 HTML table 标题

Question

如何将 table 标题浮动到其 table 的右侧？标题应显示在 table 的右侧并与 table 的顶部对齐。

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

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>

Answer 1

你不能真正让 inner-element 从它的容器中漂浮出来，但你可以通过定位做一些 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>

Checked in chrome/firefox/ie11

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

确保 table 是一个位置，以便我可以将标题放在已知位置。
将标题绝对定位到 table - top-right 角。
将标题（宽度）向右移动 100%（使用 translateX(100%)）。

Answer 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>

在 table 右侧浮动 HTML table 标题

Float HTML table caption to the right of table

html

css

html-table

css-tables

caption