JSFiddle - React, Tailwind, and code Playground

by Girisha Chennura

HTML

<link rel="stylesheet" href="https://manage.gb1s.brightbox.com/assets/application-c8352e88fa473e3f23409385688bb7af.css">
<div class="table-container">
	<table class="table table-striped table-fixed-header">
        <colgroup class="colgroups-cloud-servers-table">
            <col />
            <col />
            <col />
            <col />
            <col />
            <col span="4"/>
            <col />
        </colgroup>
      	<thead>
        	<tr>
				<th></th>
				<th>Identifier</th>
				<th>Name</th>
				<th></th>
				<th>Image</th>
				<th>Type</th>
				<th>Zone</th>
				<th class="center">Cloud IPs</th>
				<th class="center">Groups</th>
				<th>Actions</th>
        	</tr>
      	</thead>
  		<tbody>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
 ...

SCSS

.table-fixed-header {
    width: 100%;
    table-layout: fixed;

    thead, tbody, tr, td, th {
        display: block;
    }

    tr:after {
        content: ' ';
        display: block;
        visibility: hidden;
        clear: both;
    }

    thead th {
        height: 30px;
    }

    tbody {
        height: 235px;
        overflow-y: auto;
    }

    tbody td, thead th {
        float: left;
        box-sizing: border-box;
    }
}

.colgroups-cloud-servers-table {
  col {
    &:first-child {    /* column to show -abc- */
      width: 32px;
    }
    &:nth-child(2) {   /* column to show -def- */
      width: 90px;
    }
    &:nth-child(3) {   /* column to show -ghi- */
      width: 20%;
    }
    &:nth-child(4) {   /* column to show -klm- */
      width: 32px;
    }
    &:nth-child(5) {   /* column to show -nop- */

    }
    &:nth-child(6) {   /* column to show -qrs- */
      width: 10%;
    }
    &:nth-child(7) {  /* column to show -tuvΩ- */
      width: 70px;
    }
  }
}