css表格：扭曲之前

Question

我想在所有使用css：之前的表格前添加“表格”标题。 出于某种原因：在内容表现为将第一列的宽度扩展为其自身宽度的单元格之前。在内容作为独立标题行事之前，是否有可能做到这一点？

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>

Answer 2

的问题是，一个表盒的子盒必须是正确的表格的孩子。否则，它会根据Anonymous table objects生成一个匿名父代。

在你的情况下，伪元素将被包裹在一个匿名的table-cell框中，该框将被包装在一个匿名的table-row框中。

因此，伪元素的内容将只属于表的第一列，并且可以使其增长。相反，如果您希望该内容位于表格包装盒内，但不在表格框本身之外，则可以使用display: table-caption。据Tables in the visual formatting model，

表生成块框称为 表包装盒包含表框本身和任何标题框（按文档顺序）。表格框是 包含表格内部表格框的块级别框。标题框是 块级框，它们保留其自己的内容，填充，边距和 边框区域，并在表格 包装盒内呈现为正常块框。

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

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

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>