JSFiddle - React, Tailwind, and code Playground

by Chintan Upadhayay

HTML

<table>
    <colgroup>
        <col style="width: 3em;" />
        <col style="width: 6em;" />
        <col style="width: 9em;" />
    </colgroup>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1fgfh</td>
        <td>2gfhghfhghfhhhfhff</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

CSS

table {
          border-collapse: collapse;
          table-layout:fixed;
      }
      td {
          border: solid 1px;
          border-width:1px 0px 1px 0px;
          width:33%;
          position:relative;
      }
      td:nth-child(1) {
          border-left:solid 1px;
      }
      td.nest {
          padding: 0px;
      }
      td.nest table td {
          border-width: 0px 1px;
      }
      td.nest table td:first-child {
          border-left: none;
      }
      td.nest table td:last-child {
          border-right: none;
      }
      td:after {
          content:'';
          position:absolute;
          right:0;
          border-right:1px solid black;
          top:0;
          bottom:0;
      }
      tr:nth-child(2) td:nth-of-type(1):after, tr:nth-child(2) td:nth-of-type(2):after {
          right:-20px;
      }
      tr:nth-child(2) td:nth-of-type(2), tr:nth-child(2) td:nth-of-type(3) {
          padding-left:25px;
      }