erics15 erics15 - 4 months ago 13
HTML Question

Trying to create hover states in a table header & cell within the bounds of the table & also without it shifting content

Asking if this is possible - trying to create hover states in a table on the border of each cell - but not on the outside. See screen shots. I was trying to use box-shadow but ya, no luck. Also using border shifts the content on hover. Thank you. Any ideas? I tried a bunch of things. The tables are generated with datatables and dynamic data.enter image description here
enter image description here

Answer

How about using the :before pseudo element for style display? Something like the following:

td, th{
  position:relative;
  padding:10px;
  border:1px solid lightgray;
}
th:hover:before{
  position:absolute;
  content:"";
  background-color:green;
  width:100%;
  height:2px;
  display:block;
  left:0;
  top:0;
}

td:hover:before{
  position:absolute;
  content:"";
  background-color:green;
  width:2px;
  height:100%;
  display:block;
  left:0;
  top:0;
}
<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>cell1</td><td>cell2</td></tr>
    <tr><td>cell3</td><td>cell4</td></tr>
  </tbody>
</table>

Comments