highlight the table cell interactions with column and row

Question

I have an Angular Material table. I only want to highlight the table cell interactions with column and row via highlighting up till column head and left till row head. is it possible using mat-table?

example

https://stackblitz.com/angular/gxbragvnead?file=src%2Fapp%2Ftable-sorting-example.ts

here's what I tried but it didn't work because of how mat-table handles column.

tr:hover {
  background-color: #ffa;
}

td, th {
  position: relative;
}
td:hover::after,
th:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}

Hi welcome to SO. You've proposed a task, not a question. I would suggest trying a solution and then come on back when you're stuck. This keeps the site a Q&A site for developers versus a free code service. Happy Coding. — Chris W.

Karimov Karimov · Accepted Answer · 2020-08-07T17:40:12

This is how you highlight cells on hover respect to its row and column.

<html>

  <style>
  table {
   border-spacing: 0;
   border-collapse: collapse;
   overflow: hidden;
   background-color: white;
}

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

tr:hover{
   background-color: rgba(255, 255, 0, 0.5);
}

td:hover::after,th:hover::after { 
   background-color: rgba(255, 255, 0, 0.5);
   content: '\00a0';  
   height: 10000px;    
   left: 0;
   position: absolute;  
   top: -5000px;
   width: 100%;   
}
</style>


<body>
  <table>
    <tr>
        <th></th>
        <th>lore</th>
        <th>lore</th>
        <th>lore</th>
        <th>lore</th>
        <th>lore</th>
    </tr>

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

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

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

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

</table>


</body>

</html>

<!DOCTYPE html>
<html>

  <style>
  table {
   border-spacing: 0;
   border-collapse: collapse;
   overflow: hidden;
   background-color: white;
}

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

tr:hover{
   background-color: rgba(255, 255, 0, 0.5);
}

td:hover::after,th:hover::after { 
   background-color: rgba(255, 255, 0, 0.5);
   content: '\00a0';  
   height: 10000px;    
   left: 0;
   position: absolute;  
   top: -5000px;
   width: 100%;   
}
</style>


<body>
  <table>
    <tr>
        <th></th>
        <th>lore</th>
        <th>lore</th>
        <th>lore</th>
        <th>lore</th>
        <th>lore</th>
    </tr>

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

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

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

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

</table>





</body>






</html>

highlight the table cell interactions with column and row

1 Answers