如何使表格标题居中？

Posted 2023-03-29

【中文标题】如何使表格标题居中？

【英文标题】：How to center a table caption?

【发布时间】：2018-01-30 14:14:58

【问题描述】：

我在一张桌子上有一个长标题，并希望它们都对齐到彼此的中心。

html：

<table>
  <caption>This is a very long caption.</caption>
  <tr>
    <td>1</td><td>2</td>
  </tr>
  <tr>
    <td>3</td><td>4</td>
  </tr>
</table>

CSS：

caption 
  white-space: nowrap;

https://codepen.io/anon/pen/RZyxzg

【问题讨论】：

可以添加text-align: center水平居中，vertical-align: middle垂直居中

【参考方案1】：

为此使用 flexbox，使用 align-items:center

table 
  display: flex;
  flex-direction: column;
  align-items: center;
  border: red solid

<table>
  <caption>This is a very long caption.</caption>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

【讨论】：

谢谢。桌子有必要拉长吗？最好是与标题一样宽。

【参考方案2】：

它已经是了。使用text-align: center 你可以给一个border 并且看到一个long 文本会扩展整个表格的宽度。 （另请参阅将width 设置为table 时的行为）

注意：这在 Firefox 中似乎不起作用 - 使用 white-space: nowrap 时，表格不会像 Chrome 那样调整其宽度。

请看下面的演示：

table 
  border-collapse: collapse;


caption 
  white-space: nowrap;


td 
  border: 1px solid;
  text-align: center;

<table>
  <caption>This is a very long caption and even longer</caption>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

【讨论】：

不幸的是，它对我不起作用。标题不在表格的中心。它只是延伸到桌子的右侧。 （在 Firefox 中测试。）

@Daniel 你是对的，white-space: nowrap 似乎打破了 firefox 中的table