JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

<div class="table">
<table border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="67">Title</td>
      <td width="53">Product 1</td>
      <td width="61">Product 2</td>
      <td width="61">Product 3</td>
      <td width="61">Product 4</td>
      <td width="61">Product 5</td>
    </tr>
    <tr>
      <td>Feature 1</td>
      <td>yes</td>
      <td>no</td>
      <td>$9.99</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Feature 2</td>
      <td>no</td>
      <td>no</td>
      <td>free</td>
      <td>hello i am a really long answergoodness</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Feature 3</td>
      <td>no</td>
      <td>yes</td>
      <td>$4.99</td>
      <td>yes</td>
      <td>yes</td>
      </tr>
    <tr>
      <td>Feature 4</td>
      <td>no</td>
      <td><p>no i am not short</p>
        <p>i am pretty long</p></td>
      <td>free</td>
      <td><p>hello </p></td>
      <td>no</td>
      </tr>
    <tr>
      <td>Feature 5</td>
      <td>yes</td>
      <td>maybe</td>
      <td>never</td>
      <td>sometimes</td>
      <td>totally</td>
    </tr>
    <tr>
      <td>Feature 6</td>
      <td>no</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Feature 7</td>
      <td>yup</td>
      <td>cool</td>
      <td>$1,000,000</td>
      <td>words</td>
      <td>neat</td>
    </tr>
    <tr>
      <td>Feature 8</td>
      <td>yes</td>
      <td>no</td>
      <td>free</td>
      <td>yes</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Feature 9</td>
      <td>no</td>
      <td>yes</td>
      <td>$4.99</td>
      <td>yes</td>
      <td>yes</td>
      </tr>
  </tbody>
</table>
</div>

CSS

.table { 
            width: 300px; 
            overflow-x:scroll;  
            margin-left:100px; 
            overflow-y:visible;
            padding-bottom:1px;
        }

table { border-collapse:separate; border-top: 3px solid grey; }

td {
    margin:0;
    border:3px solid grey; 
    border-top-width:0px; 
    white-space:nowrap;
    background: pink;
}

td:first-of-type {
            position:absolute; 
            width:100px; 
            left:0;
            top:auto;
            border-right: 0px none black; 
            border-top-width:3px; /*only relevant for first row*/
            margin-top:-3px; /*compensate for top border*/
    background: red;
}