JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<div>
    <table>
            <thead>
              <tr>
                <th class="fixed-column fixed-column-left">1</th>
                <th>long text where I will have scroll</th>
                <th>lorem long text</th>
                <th>long long text</th>
                <td class="fixed-column fixed-column-right">5</td>
              </tr>
            </thead>
            <tbody>
            <tr>
              <th class="fixed-column fixed-column-left">1</th>
                <td>long text where I will have scroll</td>
                <td>lorem</td>
                <td>text</td>
                <td class="fixed-column fixed-column-right">5</td>
            </tr>
            </tbody>
    </table>
</div>

CSS

table {
      border-collapse: collapse;
      /*table-layout: fixed;*/
      table-layout: auto;
      width: 100%;
    }

    td, th {
      border: 1px solid grey;
      white-space: nowrap;
      text-align: left;
    }

    div {
      overflow-x: scroll;
      margin-left: 100px;
      margin-right: 100px;
      overflow-y: visible;
      padding: 0;
    }

    .fixed-column {
      position: absolute;
      width: 100px;
      top: auto;
      background:#fff;
    }
    .fixed-column-left {
      left:0;
    }
    .fixed-column-right {
      right:0;
    }