Enable highlighting a table border when hovering over it

Is there a way to highlight the boundary of a table row when hovering over it? Something like this:

https://i.sstatic.net/PbQSR.png

I attempted to use CSS with the following code:

.ant-table-tbody>tr.ant-table-row:hover>td, .ant-table-tbody>tr>td.ant-table-cell-row-hover{
  background: #fafafa;
  color: #091E42 
} 

.theme-dark .ant-table-tbody>tr.ant-table-row:hover>td, .ant-table-tbody>tr>td.ant-table-cell-row-hover{
  background:#242424;
  color: #fff;
  border: 1px solid #CDD6E0 !important;
}

However, the highlighting appears between columns as well: https://i.sstatic.net/C3CVY.png

Any suggestions on how I can adjust the CSS for this?

cssreactjsbootstrap-4material-ui

Answer №1

  • Define two custom CSS variables: --color-border: #888; and --color-border-hover: #fff;
  • Carefully apply borders to the table's cell elements. Pay special attention to setting the border-top, with the border-bottom only on the last row's TD
  • Ensure that only :first-child and :last-child TH and TD elements have left and right borders set.
  • When hovering over a row in the tbody, change the value of --color-border: to var(--color-border-hover);

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font: 1rem/1.4 sans-serif;
  background-color: #181818;
  color: #eee;
}

table {
  --color-border: #888;
  --color-border-hover: #fff;
  margin: 1rem auto;
  border-spacing: 0;
  th,
  td {
    text-align: left;
    padding: 1rem 2rem;
    border-top: 1px solid var(--color-border);
  }
  thead {
    th {
      &:first-child {
        border-radius: 10px 0 0 0;
        border-left: 1px solid var(--color-border);
      }
      &:last-child {
        border-radius: 0 10px 0 0;
        border-right: 1px solid var(--color-border);
      }
    }
  }
  tbody {
    td {
      transition: background-color 0.26s, border-color 0.26s;
      &:first-child {
        border-left: 1px solid var(--color-border);
      }
      &:last-child {
        border-right: 1px solid var(--color-border);
      }
    }
    tr:last-child {
      td {
        border-bottom: 1px solid var(--color-border);
      }
    }
    tr:hover {
      --color-border: var(--color-border-hover);
      td {
        background-color: hsla(0 100% 100% / 0.1);
      }
      &+tr td {
        border-top-color: var(--color-border-hover);
      }
    }
  }
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6a6e6d7e4c69746d617c6069226f6361">[email protected]</a></td>
    </tr>
    <tr>
      <td>Baz</td>
      <td>Fiz</td>
      <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f597939c8fb598949c99db969a98">[email protected]</a></td>
    </tr>
    <tr>
      <td>Stack</td>
      <td>Overflow</td>
      <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea999e859c8faa8e85878b8384c4898587">[email protected]</a></td>
    </tr>
  </tbody>
</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

What's the Hold-Up with IntersectionObserver in Brackets?

As a novice in the world of web development, I have been utilizing Brackets as my main tool. Recently, I've encountered a few hurdles specifically related to javascript. One issue I'm facing is trying to implement lazy loading on a div containing ...

javascripthtmlcss

Enhance the appearance of radio buttons using CSS and incorporate images to create a

Is there an easy and straightforward method to customize radio buttons using only CSS, allowing me to click on an image instead of a traditional bullet point? For example, like thumbs up/thumbs down. I have two radio buttons that need to track which one i ...

jqueryhtmlcssimageradio-button

Having trouble with React list.map not functioning properly while deleting items from local storage?

I'm currently developing a budget tracking application that allows users to input various incomes and expenses. To manage the state of this app, I am utilizing useReducer. Each income and expense is represented as an object, and upon submission by the ...

javascriptreactjsfunctiondictionaryreact-props

Expanding images to fit the div's width in Bootstrap

I've encountered an issue with my grid of resized images - the original images are larger than what can be accommodated by the Bootstrap grid setup. The problem arises when I decrease the width of my window - instead of maintaining the resized size a ...

htmlcssimagetwitter-bootstrap

When scrolling, the menu is being overlapped by the Carousel in HTML5, CSS3, and

I am currently working on a One Page HTML webpage that needs to be responsive, and the requirement is to use Bootstrap. I have gone through all the tags but can't seem to identify the issue. One problem I encountered is that when I scroll down the pa ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Here's how you can combine two individual LESS files using grunt-recess

Hey there! I'm working on compiling 2 separate files using grunt recess: recess: { dist: { options: { compile: true }, files: { 'path/css/custom. ...

csslessgruntjsrecesstwitter-recess

concealing elements using negative margins on tablet devices

I have an animated element on the ipad, moving from -200px to 1500px and being hidden due to overflow-x:hidden in the browser. However, when viewing this on the ipad, I am able to scroll "off screen" and reveal the hidden items, despite setting the body a ...

cssipadcss-transformsmargins

Sorting rows by words and numbers in JavaScript explained

Hello, I'm a beginner and I need help sorting the table rows in the following table. I also want to attach an onclick listener to the header after it is displayed. ID Name Inventory Volume 1 Rachel Data is not enough 2 Ross 100 3 Monica 1 ...

javascripthtmlcsssorting

What could be causing my Bootstrap 5 hover effect to malfunction?

Can anyone help with changing the hover effect of a bootstrap button in my code? Here's the HTML: <button type="button" class=" btn btn-dark">Sign Up</button> And here's the CSS I tried: .btn-dark:hover { color: ...

cssbuttoncss-selectorshoverbootstrap-5

Switching the active className in React and Next.js based on selection status

My goal is to dynamically change the className of each Card component when clicked on. When one Card is selected, the others should revert back to their default className. This is my UserBookingData component: const UserBookingData = ({ bookings }: any) = ...

javascriptreactjsnext.js

Using MUI Autocomplete with React Hook Form, unleashing the power of FreeSolo and interconnected fields

Seeking guidance on building ZipCode / City / State fields (also known as CAP / Città / Provincia in Italian) that are dependent on each other using data from this JSON file and repository. I am working with React Hook Form v7 and MUI v5.4.4, aiming to in ...

reactjsmaterial-uireact-hook-form

Obtaining a CHUNKY h1

After years of designing websites, one thing that continues to puzzle me is how people achieve that bold and THICK h1 effect. Take a look at this example - https://i.sstatic.net/xOJHn.png Even with a font weight of 700, it always seems too thin no matter ...

htmlcssbootstrap-4heading

Using DIV to "enclose" all the elements inside

I need assistance with my HTML code. Here is what I have: <div id="cover" on-tap="_overlayTapped" class$="{{status}}"> <form method="POST" action="/some/action"> <input required id="name" name="name" label="Your name"></input> ...

javascripthtmlcssajax

Develop a server-side component using Next.js that dynamically updates

I need to create a Next.js component that displays different greetings based on whether the current time's minutes are even or odd. The greeting should be "Hi" for even minutes and "Hello" for odd minutes, but this needs to be implemented in a server- ...

reactjsnext.js

Tips for modifying the border of an entire column in react-table

My goal is to adjust the style according to the screenshot below. This is what I expect: However, this is what I currently have: As you can see, the border bottom of the last column is not applied as expected. I have tried using the props provided by r ...

javascriptcssreactjsreact-table

Ways to transfer Material-UI FlatButton CSS to a different Button element

I've recently incorporated a loading button object into my website from (https://github.com/mathieudutour/react-progress-button), and now I want to customize it using the Material-UI FlatButton CSS. However, I'm not quite sure how to achieve this ...

javascriptcssreactjsmaterial-ui

Tips for personalizing the FileField in wtforms to function as an image button

I'm attempting to display an image from my project's directory as an icon instead of the standard "choose file" button. Unfortunately, my attempts thus far have been unsuccessful. Not only is the image not loading, but the original button is only ...

htmlcsswtforms

CSS Troubleshoot: Unable to Change Background of Current Menu Page Item

I've been attempting to add a small graphic using CSS to indicate the current page the viewer is on, but for some reason, it's not highlighting properly. Below is my code: HTML: <ul class="side-nav"> <a href="http://www.cieloazulsant ...

htmlcssnavigation

Encountering an issue such as receiving the 'Error eacces mkdir' message when trying to execute the 'npm install -g create-react-app' command

Encountered an error while trying to install reactjs on Ubuntu using the npm install -g create-react-app command. The error message is as follows. Can someone please assist me in resolving this issue? This is the error I am receiving: npm ERR! Error: EAC ...

node.jsreactjsubuntunpm

Unable to modify the width of textarea

I've been struggling to adjust the width of a textarea element, as neither setting rows and cols in HTML nor using CSS has worked for me. The height adjustment was successful with HTML. Any tips on changing the width? form, label { position: rel ...

htmlcssformstextareawidth