Emphasize the interactions within the table cells based on their corresponding column and row

I'm looking to achieve a specific interaction in my Angular Material table. I want to highlight the table cell interactions with column and row by extending the highlighting up to the column header and left to the row header. Is this something that can be done using mat-table?

Here's an example

Check out this link for reference

I attempted a solution, but it didn't work as intended due to how mat-table handles columns.

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

Answer №1

Learn how to highlight cells on hover based on their 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the nuances between Angular and Svelte in change detection mechanisms

In my daily work, I rely on Angular but also am taking the time to learn Svelte. As far as I know, neither Angular nor Svelte utilize a virtual dom and diffing process for change detection. Instead, they both have their own mechanisms for detecting chang ...

angularsveltesvelte-3angular-changedetection

Customize a theme component only when it is a child of another component

I am trying to customize the CSS of MuiButton only when it is nested inside a MuiDialog. https://i.stack.imgur.com/13doLm.png In regular CSS, you could achieve this with: .MuiDialog-root .MuiButton-root { border: 5px solid blue; } However, I am strug ...

cssreactjsmaterial-ui

Resetting the "clear: both" property for the nth-child element when multiple nth-child elements are being inherited

Currently utilizing CSS (specifically SCSS) to style the same element on various media sizes - A, B, and C. Utilizing the following for A: &:nth-of-type(2n+1) { clear: both; } For B: &:nth-of-type(3n+1) { clear: both; } Finally, for C: ...

csssasscss-selectors

Perform a delayed evaluation of the length of the @Input() array

In my Component, I am utilizing an @Input() ids: string[] = []; variable to check if the length equals 1 in the DOM. <mat-expansion-panel *ngFor="let id of ids" [expanded]="ids.length === 1"> ... </mat-expansion-panel> However, when I append ...

angularangular-material

Encountering an "ionic 4 frame-ancestors *" error while attempting to watch a Twitter video

Currently, I am in the process of developing a news app using Ionic 4. I recently tackled the challenge of embedding tweets in Twitter cards successfully. However, a new issue has arisen. When a tweet includes a Youtube video, everything works perfectly ac ...

androidangularionic-frameworktwittercontent-security-policy

Using Webflow code in ReactJS/NextJS: Best practices and implementation tips

After exporting my Webflow code to my NextJS app, I noticed that many of the HTML tags are being flagged as errors because they appear to be missing closing tags. Can anyone shed some light on why this is happening and suggest potential solutions? It&apos ...

htmlcssreactjsnext.jswebflow

Mono repo project utilizing Angular 4+ and Typescript, enhanced with Bootstrap styling

Looking for a project to practice with Angular 4+ using Typescript and a Bootstrap template. Hoping for a setup where I can just run npm install and ng serve to start. Any recommendations for mono repos would be highly valued! ...

angulartypescriptnpmbootstrap-4

Inserting JQuery Selector from a .js file into a .php file at the beginning

Incorporated in my project is a jquery plugin for a slider, which includes the code snippet below for handling 'next and prev' buttons. $(selector).prepend('\ <ul class="mk-nav-controls">\ <li>& ...

phpjqueryhtmlcss

Exploring Angular Unit Testing: A Beginner's Guide to Running a Simple Test

I'm diving into the world of angular unit testing and looking to set up my first successful test. Here's what I've come up with: import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { AppComponent } fro ...

angularunit-testingtypescriptjasminekarma-runner

Is there a way to change the color of a checkbox (both the box and font) in the disabled state using material ui

When using Material UI v4.9.12, it is possible to create a customized checkbox with a specific color that remains fixed: const GreenCheckbox = withStyles({ root: { color: green[400], '&$checked': { color: green[600], }, ...

cssreactjsmaterial-ui

Obtaining select options in jQuery by utilizing the $(this) selector

Looking for a way to loop through and log each option available in a select dropdown box, but struggling with how to use $(this). This is the code I have so far: $('select').each(function(){ $(this).find('options').each(function() ...

jqueryhtml

Minimize the expansive width of Shiny Dashboard's sidebar for

I'm facing a challenge in hiding a shinydashboard sidebar with a wider width. Upon increasing the width, however, the sidebar isn't completely disappearing from the screen. Here's an example that illustrates the issue I'm trying to add ...

htmlcssrshinyshinydashboard

What is the best way to showcase an array of objects in a table using AngularJS that updates

My technology stack includes angular.js for the front-end, node.js for server-side operations, and PostgreSQL for managing my database. Currently, I have a list of values stored in the database: Upon checking the controller code, I obtained the following ...

htmlangularjshtml-table

Implementing a default child route in Nativescript

Is there a way for me to access /account/dashboard while the router is set to '/account'? My current routes do not seem to be working properly. The AccountPage component is loading instead of the AccountDashboardPage. export const routes = [ ...

angularnativescript

Issues with Carousel Plugin Functionality

**Hey everyone, I could really use some help. As a beginner coder, please forgive any errors in my code. I am currently working on a webpage where I need to incorporate a carousel plugin within a panel body to display the latest photos. The code provided ...

jqueryhtmlcsstwitter-bootstrap

How can I extract text from a website without retaining number, dot, and alphabet bullets in the list?

I am currently using Python 2.7.8 for a project involving a website with text displayed in an ordered list format using ol tags. I need to extract the specific text items listed below: Coffee Tea Milk This is an example of the HTML code used on my websit ...

pythonhtmlweb-scrapingbeautifulsoup

How to extract information from a shared notebook on Evernote using Python

Trying to retrieve data from a shared Evernote notebook, such as this one: Initially attempted using Beautiful Soup: url = 'https://www.evernote.com/pub/missrspink/evernoteexamples#st=p&n=56b67555-158e-4d10-96e2-3b2c57ee372c' r = requests.g ...

pythonhtmlseleniumparsingxpath

Extract information from a string and format it into JSON using PHP

This PHP script has got me stuck on a particular issue. I am having trouble splitting the data correctly. Currently, I have a list of numbers in this format: 50.0.1 581 50.0.2 545 50.0.3 541 50.0.4 18 50.0.5 2 50.0.6 33 50.0.7 1 [...] I need to convert ...

phphtmlarraysjsonstring

Is it possible to alter the cursor according to the position of the mouse?

Is it possible to change the cursor from default to pointer when the mouse enters the specific rectangle area (50, 50, 100, 100) of the body? The dimensions are in pixels. Instead of defining a separate div and setting the cursor style on it, I'm loo ...

javascriptjqueryhtmlcsscursor

CSS: Indication that the Text is Extending Beyond its Container

Seeking a solution to indicate overflow of text within its container, as demonstrated in this example. Essentially, a <span> with fixed dimensions. Looking for a visual cue when text exceeds boundaries. Attempted the use of text-overflow:ellipsis;, ...

htmltextoverflowcss