css表：失真之前

Question

我试图添加＆＃34;表＆＃34;使用css之前的所有表之前的标题：之前。 由于某种原因：在内容表现为一个单元格之前，它将第一列的宽度扩展到自身的宽度。是否有可能使：在内容表现为独立标题之前？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将其设为display: table-caption;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题是桌箱的儿童盒必须是正确的桌子。否则，它将根据Anonymous table objects生成匿名父级。

在您的情况下，伪元素将被包装在匿名table-cell框内，该框将包含在匿名table-row框内。

因此，伪元素的内容将仅属于表的第一列，并且可以使其增长。

相反，如果您希望该内容位于表格包装盒内，但在表格框本身之外，则可以使用display: table-caption。根据{{​​3}}，

  

该表生成一个名为the的主块框   表包装盒，包含表格框本身和任何标题框（按文档顺序）。表格框是一个块级框   包含表格的内部表格框。标题框是   块级框，保留自己的内容，填充，边距和   边框区域，并在表格内呈现为普通块框   包装盒。

     

＆＃13;

＆＃13;

#myTable:before {
  content: "Table";
  display: table-caption;
  font-weight: bold;
}
#myTable td {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

当然，将之前内容的显示属性设置为table-caption：

div#myDiv table:before {
  content: "Table";
  padding-left: 5px;
  font-weight: bold;
  background-color: lightyellow;
  font-size: 14px;
  text-align: left;
  display: table-caption;
}
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>