Use CSS only to change behavior of tables cells under a table header when table header is selected

Question

Is it possible to change apply css for the table cells under a table header that is selected? I don't care how th got selected I just want to use css only to apply something to those table cells where their table header is selected like italicized and underline.

<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: (prototype...)

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

Community · Accepted Answer · 2017-05-23 12:31:57Z

2

HERE is an article on how to color the whole row on mouse hover.

HERE is a post that gives an example how to style an element on click with css, by utilizing a checkbox

combining those two from above, i wrote you a simple example on how to achieve your goal: FIDDLE

basically you just put checkboxes in your th and use their checked state to color the entire column by inserting a huge styled background using ::after selector and hiding its overflow:

you can style the checkboxes as you see fit. put an image instead or make them disappear if you like.

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

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Apr 24, 2014 at 18:56

Banana

7,4843 gold badges25 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3250966 Over a year ago

So if one of the headers is selected I can use css only to apply behavior to just those cells while leaving the other cells alone?

Banana Over a year ago

Kind of... check out the jsfiddle example. You cant directly edit the column cells, but instead u male it look like the cells are editted. In this example i just create a huge space and put it behind the cells to look like their background color is changed

Collectives™ on Stack Overflow

Use CSS only to change behavior of tables cells under a table header when table header is selected

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related