JSFiddle - React, Tailwind, and code Playground

by djmartini

HTML

<div class="st-table-container">
	<div class="st-table-wrapper">
		<div class="tables-wrap">
			<table class="need-table grid t-tables" style="width: 100%; table-layout: fixed;">
				<tbody>
					<tr>
						<th style="width: 31px;">10000</th>
						<th class="st-hide-content" style="width: 94px;">20000</th>
						<th style="width: 74px;">30000</th>
						<th style="width: 46px;">40000</th>
						<th style="width: 62px;">50000</th>
						<th style="width: 39px;">60000</th>
						<th style="width: 49px;">70000</th>
						<th style="width: 103px;">80000</th>
						<th style="width: 59px;">90000</th>
						<th style="width: 52px;">100000</th>
					</tr>
					<tr>
						<td>001</td>
						<td class="st-hide-content">Toyota</td>
						<td>4</td>
						<td></td>
						<td>73,9</td>
						<td>168,23</td>
						<td>649,02</td>
						<td>165,79</td>
						<td>349,92</td>
						<td>108,23</td>
					</tr>
					<tr>
						<td>002</td>
						<td class="st-hide-content">Nissan</td>
						<td>2</td>
						<td></td>
						<td>72,2</td>
						<td>194,80</td>
						<td>288,25</td>
						<td>133,84</td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>003</td>
						<td class="st-hide-content">Honda</td>
						<td>1</td>
						<td></td>
						<td>37,8</td>
						<td>221,15</td>
						<td>424,76</td>
						<td>173,99</td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>004</td>
						<td class="st-hide-content">Skoda</td>
						<td>1</td>
						<td></td>
						<td>53,7</td>
						<td>248,75</td>
						<td>1&nbsp;042,77</td>
						<td>267,68</td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>005</td>
						<td class="st-hide-content">Hummer</td>
						<td>1</td>
						<td></td>
						<td>37,9</td>
						<td>89,06</td>
						<td>302,70</td>
						<td>82,65</td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>006</td>
						<td...

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
}
tbody {
  display: table-row-group;
  vertical-align: middle;
}
.st-table-wrapper {
  width: 100%;
  background-color: #fff;
  padding: 0;
  position: relative;
}
.tables-wrap {
  width: 100%;
}
.tables-wrap .tables-col {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  width: auto;
}
table.t-tables {
  background: #FFF;
}
.tables-wrap .tables-col {
    background: #fea;
}
table.need-table {
  min-width: inherit!important;
    position: relative;
    z-index: 1;
}
.need-table th.ui-resizable, .need-table td.ui-resizable, .tables-thead th.ui-resizable, .tables-thead td.ui-resizable {
  height: 100% !important;
}
table.grid td, table.grid th {
  padding: 10px;
  border: 1px solid #CCC;
}
.t-tables th, .t-tables td {
  white-space: normal;
}
.t-tables th.st-hide-content, .t-tables td.st-hide-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}