Sticky Header Table only Css Nice
This are the root Variable that can be overwritten to customize the Table
:root {
// General
--heightTable: 500px;
--shadowTable: 2px 2px 10px rgba(0, 0, 0, 0.1);
--headPaddingTable: 8px 16px;
--bodyPaddingTable: 8px 16px;
--headColorTable: #f5f5f5;
--marginTable: 32px 0px;
--borderBottomTable: 1px solid #f5f5f5;
--tbodyBackground: #ffffff;
--headColorTextTable:rgba(0, 0, 0, 0.54);
--headWeightTable: 400;
--headSizeTable: 14px;
//Column Custom
--firstColumnWidth: 70px;
--firstColumnalign: left;
--firstColumnBg: #ffffff;
--lastColumnWidth: 30px;
--lastColumnalign: right;
--lastColumnBg: #ffffff;
--columnOneWidth: auto;
--columnOnealign: left;
--columnOneBg: #ffffff;
--columnTwoWidth: auto;
--columnTwoalign: left;
--columnTwoBg: #ffffff;
--columnThreeWidth: auto;
--columnThreealign: left;
--columnThreeBg: #ffffff;
--columnFourWidth: auto;
--columnFouralign: left;
--columnFourBg: #ffffff;
--columnFiveWidth: auto;
--columnFivealign: left;
--columnFiveBg: #ffffff;
--columnSixWidth: auto;
--columnSixalign: left;
--columnSixBg: #ffffff;
--columnEightWidth: auto;
--columnEightalign: left;
--columnEightBg: #ffffff;
--columnNineWidth: auto;
--columnNinealign: left;
--columnNineBg: #ffffff;
--columnNineWidth: auto;
--columnNinealign: left;
--columnNineBg: #ffffff;
--columnTenWidth: auto;
--columnTenalign: left;
--columnTenBg: #ffffff;
--columnElevenWidth: auto;
--columnElevenalign: left;
--columnElevenBg: #ffffff;
}
<div class="containerTableSticky">
<table class="tableSticky eq-ui-table-sort">
<thead class='head-table-s'>
<tr>
<th class="firstColumn">
<span>Color</span>
</th>
<th class="columnOne">
<span>Name</span>
</th>
<th class="columnTwo eq-ui-data-table-sort-column">
Person
<i class="material-icons">sort</i>
</th>
<th class="columnThree">
<span>Supervisor</span>
</th>
<th class="columnFour eq-ui-data-table-sort-column">
Employees
<i class="material-icons">sort</i>
</th>
<th class="columnFive">
<span>Sub-teams</span>
</th>
<th class="lastColumn">
<span>Actions</span>
</th>
</tr>
</thead>
<tbody class='list-table-s'>
<tr>
<td class="firstColumn">
<span>Red</span>
</td>
<td class="columnOne">
<div class="containerMultiline">
<span>CEO of Design</span>
<small>John Doe</small>
</div>
</td>
<td class="columnTwo">
<span>Emma Johnson</span>
</td>
<td class="columnThree">
<span>Frank Sinatra</span>
</td>
<td class="columnFour">
1
</td>
<td class="columnFive">
<span>Secondary Team</span>
</td>
<td class="lastColumn">
<a data-target="dropdown-action" data-hover="false" data-auto-align-target="false" class="btn btn-default eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves dropdown-trigger">
<i class="mdi mdi-dots-vertical eq-ui-icon eq-ui-icon-24"></i>
</a>
<ul id="dropdown-action" class="eq-ui-dropdown">
<li><a href="#!">Some Action</a></li>
<li class="disabled"><a href="#!">Disabled Action</a></li>
<li><a href="#!" class="active">Item Active</a></li>
<li><a href="#!">Another Action</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>