如何将 table 与横跨整个页面的标题居中

Question

我的网页中有很多 table，我需要将它们的标题居中。设置 margin-left 和 margin-right 属性大多有效；但是，这些 table 中的许多也很窄，并且标题只能与 table 一样宽。

Example at codepen.io

这是我尝试过的：

显式设置标题的宽度 (width: 100%)：这只会使 table off-center 因为 thead 和 tbody 元素在table 没有居中。
设置 table 使用 flexbox 模型 (display: flex; flex-direction: column; align-items: center;): thead 和 tbody 没有对齐，这不符合字幕的 caption-side 属性。

下面的屏幕截图（在 LaTeX 中呈现）显示了我想要的对齐方式。

有没有办法让 table 和标题居中，同时优雅地处理狭窄的 tables？

Answer 1

好的！尝试使用 <figcaption>。这是您的代码的修改版本。

table {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  border-collapse: collapse;
}

th, td {
  padding-left: 5px;
  padding-right: 5px;
}

figcaption {
  padding: 1px;
  text-align : center;
}

<figure>
  <table id="vowel-derivs-0-1-5">
    
    <thead><tr><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th></tr></thead>
    <tbody>
      <tr><td>a</td><td>o</td><td>e</td><td>i</td><td>a</td></tr>
      <tr><td>o</td><td>e</td><td>e</td><td>i</td><td>a</td></tr>
      <tr><td>e</td><td>i</td><td>i</td><td>i</td><td>e</td></tr>
    </tbody>
  </table>
  <figcaption>Table 3: Thematic vowel derivatives for paradigms 0, 1, and 5.</figcaption>
</figure>

希望您已经找到答案。

Answer 2

您也可以使用伪超大尺寸来增加 table 的宽度：

从你的笔中分叉的例子：

table {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  border-collapse: collapse;
}
tr::before,
tr::after {
  content: "";
  display: table-cell;
  width: 50%;
}
th {
  border-bottom: solid;
}
th,
td {
  padding-left: 5px;
  padding-right: 5px;
}

caption {
  caption-side: bottom;
  padding: 0.3em;
}

<table id="vowel-derivs-0-1-5">
  <caption>Table 3: Thematic vowel derivatives for paradigms 0, 1, and 5.</caption>
  <thead><tr><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th></tr></thead>
  <tbody>
    <tr><td>a</td><td>o</td><td>e</td><td>i</td><td>a</td></tr>
    <tr><td>o</td><td>e</td><td>e</td><td>i</td><td>a</td></tr>
    <tr><td>e</td><td>i</td><td>i</td><td>i</td><td>e</td></tr>
  </tbody>
</table>

如何将 table 与横跨整个页面的标题居中

How to center table with caption spanning through whole page

css

html-table

centering