JSFiddle - React, Tailwind, and code Playground

by maskl

HTML

<strong>By default on Chrome box shadow doesn't work on tr is not working.</strong>
<table class="tab0">
  <tr>
    <td>Lorem ipsum</td>
    <td>Lorem ipsum dolor sit amet, adipiscing elit.<br>Etiam elit.</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Etiam posuere dui nec mauris dictum.</td>
  </tr>
</table>

<strong>Box shadow on td is working, but we need to highlight the whole row.</strong>
<table class="tab1">
  <tr>
    <td>Lorem ipsum</td>
    <td>Lorem ipsum dolor sit amet, adipiscing elit.<br>Etiam elit.</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Etiam posuere dui nec mauris dictum.</td>
  </tr>
</table>

<strong>We can set tr to display: block, but then we lost the whole table positioning features (it would be nice if cells width is constant).</strong>
<table class="tab2">
  <tr>
    <td>Lorem ipsum</td>
    <td>Lorem ipsum dolor sit amet, adipiscing elit.<br>Etiam elit.</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Etiam posuere dui nec mauris dictum.</td>
  </tr>
</table>

<strong>Approach with td:first-child and :before, it is nice but we need to know the width of table in pixels.</strong>
<table class="tab3">
  <tr>
    <td>Lorem ipsum</td>
    <td>Lorem ipsum dolor sit amet, adipiscing elit.<br>Etiam elit.</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Etiam posuere dui nec mauris dictum.</td>
  </tr>
</table>

<strong>Some fancy idea with before and after. Need various z-indices, and cells paddings and background color</strong>
<table class="tab4">
  <tr>
    <td>Lorem ipsum</td>
    <td>Lorem ipsum dolor sit amet, adipiscing elit.<br>Etiam elit.</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Etiam posuere dui nec mauris dictum.</td>
  </tr>
</table>

SCSS

table {
  margin: 20px;
  border: 1px solid red;
  border-spacing: 0;
  
  td {
    padding: 20px;
  }
}

.tab0 {
  tr:hover {
    background: yellow;
    box-shadow: 0 0 10px 10px orange;
  }
}

.tab1 {
  td:hover {
    background: yellow;
    box-shadow: 0 0 10px 10px orange;
  }
}

.tab2 {
  tr {
    display: block;
    &:hover {
      background: yellow;
      box-shadow: 0 0 10px 10px orange;
    }
  }
}

.tab3 {
  tr:hover td {
    position: relative;
    background: yellow;
    
    &:first-child:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 500px;
      height: 100%;
      box-shadow: 0 0 10px 10px orange;
    }
  }
}

.tab4 {
  td {
    position: relative;
    background: white;
  }
  
  tr:hover td {
    background: yellow;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 10px 10px orange;
      z-index: 1;
    }
    
    &:after {
      content: "";
      width: 40px;
      height: 100%;
      background-color: yellow;
      position: absolute;
      right: -20px;
      top: 0;
      z-index: 2;
    }
    
    &:last-child:after {
      display: none;
    }
  } 
}