选择表格标题时，仅使用 CSS 更改表格标题下表格单元格的行为

Question

是否可以更改选定表格标题下表格单元格的应用 css？我不在乎它是如何被选中的，我只想使用 css 将某些东西应用于那些选择了表格标题的表格单元格，例如斜体和下划线。

<table>
 <tr>
   <th>col1</th>
   <th class="selected">col2</th>
 </tr>
 <tr>
  <td>cell1a</td>
  <td>cell2b</td>
 </tr>
 <tr>
  <td>cell1aa</td>
  <td>cell2ba</td>
 </tr>
</table>

css：（原型...）

for the column position of the th row that is selected on this table
apply this css to the column position of all the td elements of this table
{
  font-style:italic;
  text-decoration: underline;
}  

Answer 1

HERE 是一篇关于如何在鼠标悬停时为整行着色的文章。

HERE 是一篇文章，它提供了一个示例，通过使用复选框，如何使用 css 设置元素的样式

结合上面的这两个，我给你写了一个关于如何实现你的目标的简单例子：FIDDLE

基本上，您只需将复选框放入您的th 并使用它们的选中状态通过使用::after 选择器插入一个巨大的样式背景并隐藏其溢出来为整个列着色：

您可以根据需要设置复选框的样式。如果你愿意，可以放一张图片或者让它们消失。

HTML：

<table>
<tbody>
    <tr>
        <th></th>
        <th><input type="checkbox">50kg</input></th>
        <th><input type="checkbox">55kg</input></th>
        <th><input type="checkbox">60kg</input></th>
        <th><input type="checkbox">65kg</input></th>
        <th><input type="checkbox">70kg</input></th>
    </tr>
    <tr>
        <th>160cm</th>
        <td>20</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
        <td>27</td>
    </tr>
    <tr>
        <th>165cm</th>
        <td>18</td>
        <td>20</td>
        <td>22</td>
        <td>24</td>
        <td>26</td>
    </tr>
    <tr>
        <th>170cm</th>
        <td>17</td>
        <td>19</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
    </tr>
    <tr>
        <th>175cm</th>
        <td>16</td>
        <td>18</td>
        <td>20</td>
        <td>22</td>
        <td>24</td>
    </tr>
</tbody>

CSS：

input[type="checkbox"] {

margin: 0;
border: 0 none;
padding: 0;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

th input[type="checkbox"]:checked::after {
    background-color: #ffa;
    content: '\00a0';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}