JSFiddle - React, Tailwind, and code Playground

by mark edwards

HTML

<html>
<head>

</head>
<body>
<br />
<br />

<table border='3px'>
<tr>
<td class='styleTableTdItem bottom'>
<span  id='diagLine'>
this is a longer diagonal  
</span>
</td>
<td class='styleTableTdItem'>
<span  style='z-index:100'>Next Value</span></td>
<!--
<td class='styleTableTdItem'>
<span  style='z-index:100'>Next Value</span></td>
-->
</tr>
</table>
<p>
we should just see "this is a long" and omit "diagonal line"
</p>
</body>
</html>

CSS

/* copied from: https://9elements.com/blog/pure-css-diagonal-layouts/ */
span#diagLine {
  margin-left: 0px;
  margin-top: 10px;
  transform: rotate(345deg);
  transform-origin: left bottom;
  position: absolute;
  display:relative;
  text-decoration: none;
  color: blue;
  font-size: 13px;
  z-index:-10;
}

td.styleTableTdItem {
  width: 60px;
  height: 60px;
  z-index: 1; 
   
}

td:not(.bottom){
  background-color:white
}