4

I would like to use CSS only in order to highlight both the table header and the first line of the table row i.e. if the user hovers on a given table cell, the corresponding table header (say Tuesday) and the corresponding first td (say nighttime) will change to bold say.

Is that possible with css?

       <table class="table table-condensed">
            <thead>
            <tr>
                <th></th>
                <th>Monday</th>
                <th>Tuesday</th><!-- highlighted -->
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
                <th>Saturday</th>
                <th>Sunday</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Morning</td>
                <td>Morning/Monday</td>
                <td>Morning/Tuesday</td>
                <td>Morning/Wednesday</td>
                <td>Morning/Thursday</td>
                <td>Morning/Friday</td>
                <td>Morning/Saturday</td>
                <td>Morning/Sunday</td>
            </tr>
            <tr>
                <td>Nighttime</td><!-- highlighted -->
                <td>Nighttime/Monday</td>
                <td>Nighttime/Tuesday</td><!-- hovered on -->
                <td>Nighttime/Wednesday</td>
                <td>Nighttime/Thursday</td>
                <td>Nighttime/Friday</td>
                <td>Nighttime/Saturday</td>
                <td>Nighttime/Sunday</td>
            </tr>
            </tbody>
        </table>
balteo
  • 23,602
  • 63
  • 219
  • 412

3 Answers3

4

The other answers are correct, in as much you cannot traverse back up the DOM with CSS (yet).

However, there are other solutions you might want to take a look at. Since this is not my work, I will not take credit, but this is a place you can start doing some research.

cols, colgroups and css :hover psuedoclass

and view the jsfiddle here

http://jsfiddle.net/ThinkingStiff/rUhCa/

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

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

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '\00a0';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -1;        
}

td:hover::after,
.col:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}
<table>
    <tr>
        <th></th>
        <th class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
        <th class="col">65kg</th>
        <th class="col">70kg</th>
    </tr>

    <tr>
        <th class="row">160cm</th>
        <td>20</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
        <td>27</td>
    </tr>

    <tr>
        <th class="row">165cm</th>
        <td>18</td>
        <td>20</td>
        <td>22</td>
        <td>24</td>
        <td>26</td>
    </tr>

    <tr>
        <th class="row">170cm</th>
        <td>17</td>
        <td>19</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
    </tr>

    <tr>
        <th class="row">175cm</th>
        <td>16</td>
        <td>18</td>
        <td>20</td>
        <td>22</td>
        <td>24</td>
    </tr>

</table>

CSS-tricks.com also picked up this idea and took it a bit further

https://css-tricks.com/simple-css-row-column-highlighting/

Community
  • 1
  • 1
chazsolo
  • 7,873
  • 1
  • 20
  • 44
1

There is no child to parent relationship in CSS. So, you have to use jQuery's method to highlight the specific heading or cell using jQuery hover function. For example: 

$("p").hover(function(){
    $("p").css("background-color", "yellow");
    $("p").css("background-color", "pink");
});
Bilal Maqsood
  • 1,163
  • 3
  • 15
  • 43
1

This is not possible with just CSS, as CSS selectors can not traverse back up the DOM tree.

You'll need some kind of JavaScript solution.

Here's a basic example using jQuery. It is fairly verbose, so maybe you can see all the parts in action.

http://jsbin.com/qosixanika/1/edit?html,js,output

$('.morning, .night').find('td').not(':first-child').on('mouseenter mouseleave', function () {
    var i = $(this).index();

    $(this).toggleClass('bg');

    $(this).closest('tr').find('td').first().toggleClass('bg');

    $('.days th').eq(i).toggleClass('bg');
  });

Refactored:

http://jsbin.com/kewonaqaqa/1/edit?html,js,output

$('.hours td').not(':first-child').on('mouseenter mouseleave', function () {
  var i = $(this).index(),
      col = $(this);

  col
    .add(col.closest('tr').find('td').first())
    .add(col.closest('table').find('.days th').eq(i))
    .toggleClass('bg');
});
Oka
  • 23,367
  • 6
  • 42
  • 53