JSFiddle - React, Tailwind, and code Playground

by Ethan Brace

HTML

<h1>Without divs:</h1>
<table>
  <tr>
    <th>COL 1</th>
    <th>COL 2</th>
    <th>COL 3</th>
    <th>COL 4</th>
  </tr>
  <tr>
    <td>stuff</td>
    <td>stuff</td>
    <td>stuff</td>
    <td>
      Optio doloremque quo et aut ut. Praesentium molestias rerum iste sed ad laboriosam. Ut dolorem numquam architecto corrupti adipisci.
    </td>
  </tr>
</table>


<h1>With divs:</h1>
<table>
  <tr>
    <th>COL 1</th>
    <th>COL 2</th>
    <th>COL 3</th>
    <th>COL 4</th>
  </tr>
  <tr>
    <td><div>stuff</div></td>
    <td><div>stuff</div></td>
    <td><div>stuff</div></td>
    <td>
      <div>
        Optio doloremque quo et aut ut. Praesentium molestias rerum iste sed ad laboriosam. Ut dolorem numquam architecto corrupti adipisci.
      </div>
  </td>
  </tr>
</table>

SCSS

table{
  tr td{
    width:100px;
    border:1px solid black;
    overflow-y:hidden;
  }
  td div{
    max-height:30px;
    
  }
}