테이블 cross line

by hohoya33

HTML

<table>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
     <tr>
      <td>Content</td>
      <td class="crossed">Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

CSS

table
{
  min-width: 100%;
}

table td
{
  border: 1px solid silver;
  position: relative;
}

table td.crossed::after
{
  position: absolute;
  content: "";
  left:0;
  right:0;
  top:0;
  bottom:0;
  background: linear-gradient(to right top, transparent calc(50% - 1px), red 50%, red 51%, transparent calc(50% + 1px)), 
  linear-gradient(to bottom right, transparent calc(50% - 1px), red, transparent calc(50% + 1px))
}

td.diagonalRising
{
   background: linear-gradient(to right bottom, #ffffff 0%,#ffffff     
   49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}

td.diagonalFalling
{
  background: linear-gradient(to right top, #fff 0%,#fff 49.9%,#000000    
 50%,#000000 51%,#fff 51.1%,#fff 100%);
}