JSFiddle - React, Tailwind, and code Playground

by Anton Ayupov

HTML

<div class="search-table-outter wrapper">
	<table class="search-table inner">
		<tr>
			<th>Col1</th>
			<th>Col2</th>
			<th>Col3</th>
			<th>Col4</th>
			<th>Col5</th>
			<th>Col6</th>
			<th>Col7</th>
			<th>Col8</th>
			<th>Col9</th>
			<th>Col10</th>
		</tr>
        <tr>
			<td><a href="#">The brown fox is mad jumping all over the place for no reason  </a></td> 
			<td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
            <td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
		</tr>
              <tr>
			<td><a href="#">The brown fox is mad jumping all over the place for no reason  </a></td> 
			<td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
            <td>The brown fox is mad jumping all over the place for no reason </td>
			<td>The brown fox is mad jumping all over the place for no reason </td>
		</tr>
              <tr>
			<td><a href="#">The brown fox is mad jumping all over the place for no reason  </a></td> 
			<td>The brown...

CSS

.search-table-outter {border:2px solid red;}
.search-table{table-layout: fixed; margin:40px auto 0px auto; }
.search-table, td, th{border-collapse:collapse; border:1px solid #777;}
th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
td{padding:5px 10px; height:35px;}

.search-table-outter { overflow-x: scroll; }
th, td { min-width: 100px; }