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

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

1 个答案: