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>