Troubleshoot: Inability to highlight a column and row in a table using ::after and ::before

To create a hover effect where the corresponding column and row are highlighted when the mouse is on a cell, as well as highlighting the row for player 1's actions and the column for player 2's actions, I attempted the following code:

/* CSS Code */
/* Add your styles here */

The code snippet defines the styles for table cells, rows, and columns, along with specific styling for player actions. The goal is to achieve the desired highlighting effects based on mouse interaction.

Although I have successfully implemented row highlighting, I am facing challenges with highlighting the columns. I seek advice on how to accomplish this using CSS or any alternative methods.

htmlcss

Answer №1

make sure to specify a width, increase the height, and handle overflow situations that may occur.

suggested approach

.rotate {
  writing-mode: vertical-lr;
  writing-mode: sideways-lr;
  /* adjust accordingly */
}

th {
  font-weight: normal;
  align-content: center;
}

td {
  border: 1px black solid;
  padding: 5px;
  text-align: center;
  height: 1.1cm;
  width: 1.1cm;
  box-shadow:0 0 0 2px white;
}

.col {
  width: 1.1cm;
}

.row {
  height: 1.1cm;
}

.rotate {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  width: 1.5em;
}

.float-left {
  width: 25%;
  float: left;
}

tr.hl:hover th:not([rowspan]),
tr.hl:hover td {
  background-color: yellow;
}

td:hover::before {
  content: '';
  position: absolute;
  background-color: yellow;
  z-index: -1;
  width: 100%;
  top: 0;
}

td:hover::after,
.col:hover::after {
  content: 'j';
  position: absolute;
  background-color: yellow;
  z-index: -1;
  height: 2000%;
  width: 100%;
  bottom: -1000%;
  left: 0;
}

th,
td {
  position: relative;
}

#player1 {
  overflow: hidden;
}

thead th {
  background: white;
  box-shadow: 0 0 0 2px white;
}
<table id="player1">
  <thead>
    <tr style="color: red">
      <th colspan=5 style="text-align: right">Player 1's Payoffs </th>
    </tr>
    <tr>
      <th colspan=2></th>
      <th colspan=3 style="font-size: smaller; text-align: center">Player 2's actions</th>
    </tr>


  </thead>
  <tr style="text-align: center">
    <th colspan=2></th>
    <th class="col">d</th>
    <th class="col">e</th>
    <th class="col">f</th>
  </tr>

  <tr style="color: red" class="hl">
    <th rowspan=3 class="rotate" style="font-size: smaller;">
      <div>Player 1's actions</div>
    </th>
    <th class="row">a</th>
    <td>10</td>
    <td>4</td>
    <td>16</td>
  </tr>

  <tr style="color: red" class="hl">
    <th class="row">b</th>
    <td>20</td>
    <td>8</td>
    <td>0</td>
  </tr>
  <tr style="color: red" class="hl">
    <th class="row">c</th>
    <td>4</td>
    <td>18</td>
    <td>12</td>
  </tr>

</table>

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

Crafting a personalized arrow for sorting headers in Angular Material

Currently working on an Angular 5 project and I'm looking to implement a custom sort icon in the header. The goal is to achieve a similar effect to this example, without using the default arrow. I attempted to modify the CSS styles, but it wasn' ...

javascriptcssangularangular-material

Enhancing the visual appeal of a javascript canvas animation

I am facing a small issue and I want to incorporate an animation from: http://codepen.io/chuckeles/pen/mJeaNJ My main query is how can I modify it so that instead of dots, there would be small images? Which part of the code should I edit for this purpose? ...

javascriptjqueryhtmlcsscanvas

The data-src tags are functioning properly in the index.html file, but they are not working correctly in angular

I'm still learning about Angular and JavaScript, so please bear with me if my questions seem silly. I've been trying to add a theme to my Angular project. When I include the entire code in index.html, everything works fine. However, when I move ...

javascriptjqueryhtmlangularjs

I am having trouble getting my JavaScript to load

I've hit a roadblock trying to understand why my JavaScript code isn't executing properly. Could someone kindly point out what I may have overlooked? :( JSFiddle Link HTML Snippet <div class="po-markup"> <br> <a href="# ...

javascriptjqueryhtml

arrangement of form labels in material-ui

Is there a way to configure the labels in Material-ui + react forms to be displayed beside input fields for better readability? For example: name [input] title [input] instead of name [input] title [input] I have looked through the documentation b ...

cssreactjsformsmaterial-uiformik-material-ui

The JavaScript-generated form element will not be included in the data submitted through the POST method

While it may appear that this question has been asked before, my specific inquiry seems to be unique as I have not found a similar answer in other threads. Therefore, I am initiating a new discussion. My issue revolves around a form which contains a link ...

javascriptjqueryhtmlforms

Issues with Disabling the Browser's Back Button with jquery

I have been attempting to prevent the back button from functioning in a specific Browser, Microsoft Bing. Interestingly, my code works only if I click somewhere in the window first. If I don't click anywhere and try to go back directly, it still allow ...

javascripthtmljquery

What is the best way to adjust the layout of these two elements using CSS in order to display them on

I need assistance with adjusting the layout of a dropdown list next to its label in an Angular html page. <div *ngIf="this.userRole == 'myrequests'" class="col-2" [ngClass]="{ 'd-none': view != 'list&apo ...

cssangulartypescriptbootstrap-4

Converting JSON data into an HTML table

I'm struggling to convert a JSON object into an HTML table, but I can't seem to nail the format. DESIRED TABLE FORMAT: Last Year This Year Future Years 45423 36721 873409 CURRENT TABLE FORMAT: Last Year 45423 This ...

javascriptjqueryhtmljsontwitter-bootstrap-3

Guide to populating a dropdown list using an array in TypeScript

I'm working on a project where I have a dropdown menu in my HTML file and an array of objects in my TypeScript file that I am fetching from an API. What is the best approach for populating the dropdown with the data from the array? ...

htmlangulartypescript

What is the best way to align text in the middle on smaller devices like phones and iPads?

I have been working on a login screen and encountered a problem with the layout on smaller devices. Despite centering all the content perfectly on my computer's browser, when I inspect it using developer tools for smaller devices, everything shifts to ...

htmlcssreactjsbootstrap-4bootstrap-5

Guide for implementing smooth fade in and out effect for toggling text with button click

I have this code snippet that toggles text on button click: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> function toggleText(){ ...

javascripthtmljquerycss

The flexbox layout is not properly stacking div rows in a column

Objective: Creating a flexbox layout with a responsive background image that adjusts in height when the screen size changes, causing elements to wrap; In addition, there is a fixed header bar at the top of the page. The layout consists of a full-screen co ...

htmlangularcssflexbox

Selecting text within a parent div using JQuery

I have the following elements in my HTML: <div class ="parent"> <div class="inner">Hello <div>Goodbye</div> </div> </div> <div class ="parent"> <div class="inner">Hello <div>Goodbye</ ...

jqueryhtmlselecteach

navigation bar directing to the wrong destination

My landing page has attached pages like landing/gothere and /another. The issue arises when I try to navigate from /another to landing/gothere. I fetch landing information using an API, but there's a delay when I click on the navbar link. The page loa ...

javascripthtmlvue.jsnuxt.js

Determine the total number of days using the bootstrap date range picker

Currently, I am utilizing the bootstrap jquery daterangepicker in order to determine the number of days between 2 dates. Within my HTML code, I have implemented 2 input fields as shown below: <div class="col-12 form-group has-feedback"> <labe ...

jqueryhtmlbootstrap-4bootstrap-modalbootstrap-daterangepicker

Adjust the Division's Width to be 20% of the Total Page Width Excluding Margins

https://i.sstatic.net/T0nKq.png I need to create a menu page with 5 equal columns, but I'm facing an issue with the layout. Here's my current CSS for the yellow divs: width:20%; height:100vh; background-color: yellow; display:inline-block; In ...

htmlcss

React Navigation Error: navigateTo must be used within a valid router configuration

When attempting to utilize useNavigation() from react-router-dom, I encounter the following error: Error: useNavigation must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router. NavBar src/components/NavBar.js:6 3 ...

javascripthtmlreactjsreact-router-dom

jQuery is used to make an object fade out once another object has been moved into place

As I delve into the world of jQuery, I've decided to create a simple Super Mario imitation. The concept is to control Mario using arrow keys and fade out mushrooms once Mario reaches them. However, my attempts at achieving this result have not been su ...

javascriptjqueryhtmlcssonkeydown

Tips for retrieving JSON data using ajax with jPut

Recently, I stumbled upon a handy jQuery plugin called Jput that allows for easy appending of JSON data to HTML content. You can check it out here. However, I am curious about the process of sending and retrieving JSON data via AJAX. Any insights or guida ...

javascriptjqueryhtmlajax