JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<table>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
<tr>
<td>column1</td>
<td>column2</td>
<td>
<select>
<option>An Option</option>
<option>Another Option</option>
<option>Yet Another Option</option>
</select>
</td>
</tr>
<tr>
<td>column1</td>
<td>column2</td>
<td>
<select>
<option>An Option</option>
<option>Another Option</option>
<option>Yet Another Option</option>
</select>
</td>
</tr>
<tr>
<td>column1</td>
<td>column2</td>
<td>
<select>
<option>An Option</option>
<option>Another Option</option>
<option>Yet Another Option</option>
</select>
</td>
</tr>
<tr>
<td>column1</td>
<td>column2</td>
<td>
<select>
<option>An Option</option>
<option>Another Option</option>
<option>Yet Another Option</option>
</select>
</td>
</tr>
<tr>
<td>column1</td>
<td>column2</td>
<td>
<select>
<option>An Option</option>
<option>Another Option</option>
<option>Yet Another Option</option>
</select>
</td>
</tr>
<tr>
<td>column1</td>
<td>column2</td>
<td>
<select>
<option>An Option</option>
...
CSS
#container {
border: 1px solid black;
width: 500px;
height: 330px;
overflow: auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th{
font-weight: bold;
}