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 {
    height: 235px; 

    tr {
        width: 100%;
        display: inline-table;
    }
    
    tbody{
      overflow-y: scroll;
      height: 230px;
      width: 100%;
      position: absolute;
    }
}


.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;
    }
  }
}