html - 如何使用 :before selector? 向表格添加标题

Question

我正在尝试使用 css :before 在所有表格之前添加“表格”标题。出于某种原因，:before content 表现为将第一列的宽度扩展到自身宽度的单元格。如何使用 :before 将标题添加到表中，这应该作为一个独立的标题？

div#myDiv table:before {
  content: "Table";
  padding-left: 5px;
  font-weight: bold;
  background-color: lightyellow;
  font-size: 14px;
  text-align: left;
}
div#myDiv table td {
  border: 1px solid black;
}

<div id="myDiv">
  <table>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
  </table>
</div>

Answer 1

让它display: table-caption;

div#myDiv table:before {
  content: "Table";
  display: table-caption;
  padding-left: 5px;
  font-weight: bold;
  background-color: lightyellow;
  font-size: 14px;
  text-align: left;
}
div#myDiv table td {
  border: 1px solid black;
}

<div id="myDiv">
  <table>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
  </table>
</div>