JSFiddle - React, Tailwind, and code Playground

by akshatha suchethan

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="panel panel-default">
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
    </thead>
  </table>

  <div class="div-table-content">
    <table class="table table-condensed">
      <tbody>
        <tr>
          <td>data</td>
          <td>more data</td>
          <td>hello world, nice to see you again, and what a beautiful fixed header column you have</td>
        </tr>
        <tr>
          <td>data</td>
          <td>more data</td>
          <td>hello world, nice to see you again, and what a beautiful fixed header column you have</td>
        </tr>
        <tr>
          <td>data</td>
          <td>more data</td>
          <td>hello world, nice to see you again, and what a beautiful fixed header column you have</td>
        </tr>
        <tr>
          <td>data</td>
          <td>more data</td>
          <td>hello world, nice to see you again, and what a beautiful fixed header column you have</td>
        </tr>
        <tr>
          <td>data</td>
          <td>more data</td>
          <td>hello world, nice to see you again, and what a beautiful fixed header column you have</td>
        </tr>
        <tr>
          <td>data</td>
          <td>more data</td>
          <td>hello world, nice to see you again, and what a beautiful fixed header column you have</td>
        </tr>
      </tbody>
    </table>
  </div>

CSS

table {
  table-layout: fixed;
}

.div-table-content {
  height: 150px;
  overflow-y: auto;
}