JSFiddle - React, Tailwind, and code Playground

HTML

<div id="table-wrapper">
      <table id="process-manager-table">
				<tr>
					<th>Process</th>
					<th>User</th>
					<th>CPU%</th>
				</tr>
				<tr>
					<td>system-welcome.exe</td>
					<td>dvette</td>
					<td>-</td>
				</tr>
				<tr>
					<td>process-manager.exe</td>
					<td>dvette</td>
					<td>-</td>
				</tr>
				<tr>
					<td>process-manager.exe</td>
					<td>dvette</td>
					<td>-</td>
				</tr>
				<tr>
					<td>process-manager.exe</td>
					<td>dvette</td>
					<td>-</td>
				</tr>
				<tr>
					<td>process-manager.exe</td>
					<td>dvette</td>
					<td>-</td>
				</tr>
				<tr>
					<td>process-manager.exe</td>
					<td>dvette</td>
					<td>-</td>
				</tr>
			</table>
 </div>

CSS

#table-wrapper {
 	height: 100px;
	width: 400px;
	padding: 0px;
	margin: 0px auto 0px auto;
	overflow: auto;
	background-color: yellow;
}

table {
	width: 100%;
  max-height: 50px;
	padding: 15px;
	text-align: left;
	border-collapse: collapse;
	background-color: yellow;
}
table > tbody > tr {
	font-size: 14px;
	color: #474747;
	background-color: #E2E2E2;
}
table > tbody > tr:first-child {
	font-size: 16px;
	color: #454545;
	outline: 1px solid #6A6A6A;
	background: linear-gradient(to top, #8e9eab, #eef2f3);
}
table > tbody > tr > th {padding: 5px 10px;}
table > tbody > tr > th:nth-child(1),
table > tbody > tr > th:nth-child(2) {border-right: 1px solid #717171;}
table > tbody > tr > td {padding:2px 5px 2px 10px;}

JavaScript

/*


Remove the display property from the table and the widtn is fine.

Add the display:inline-block to table and scroll works fine but width does not

D:






*/