如何将css内容属性设置为表行的动态值

Question

如何将css内容属性设置为表行和第一个子值的动态值？

我的表格html：

<table class="cTable">
    <tr> <td> CollegeName1 </td>.....</tr>
    <tr> <td> CollegeName2 </td>.....</tr>
    <tr> <td> CollegeName3 </td>.....</tr>
</table>    

的CSS：

.cTable td:nth-of-type(1):before {
   content: "Institute Name";
}   

Answer 1

您可以使用attr表达式。

.cTable td:nth-of-type(1):before {
   content: attr(data-name);
} 

<table class="cTable">
    <tr> <td data-name="Institute Name 1"> CollegeName1 </td></tr>
    <tr> <td data-name="Institute Name 2"> CollegeName2 </td></tr>
    <tr> <td data-name="Institute Name 3"> CollegeName3 </td></tr>
</table> 

Answer 2

使用css变量标题：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

＆＃13;

＆＃13;

.cTable td:nth-of-type(1):before {
   content: var(--dinamic);
}  

＆＃13;

<table class="cTable">
    <tr> <td style="--dinamic:'dinamic text1'"> CollegeName1 </td>.....</tr>
    <tr> <td style="--dinamic:'dinamic text2'"> CollegeName2 </td>.....</tr>
    <tr> <td style="--dinamic:'dinamic text3'"> CollegeName3 </td>.....</tr>
</table>    

＆＃13;

＆＃13;

＆＃13;