表格

Question

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

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

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

你不能真正让内部元素浮出它的容器，但你可以通过定位做一些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

以下是我在那里所做的解释：

1. 确保桌子是一个位置，这样我就可以将标题放在已知的位置。
2. 将标题绝对放在桌面上 - 位于右上角。
3. 将标题100％（其宽度）向右移动（使用translateX(100%)）。

Answer 2

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

<强>段

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;