JSFiddle - React, Tailwind, and code Playground
HTML
<div class="layout" style="background: #222222; width: 100%">
<div>
<div class="layout layoutbacking">
<table>
<tr>
<th>
header 1
</th>
<th>
header 2
</th>
<th>
header 3
</th>
<th>
header 4
</th>
</tr>
<tr>
<td>
data 1
</td>
<td>
data 2
</td>
<td>
data 3
</td>
<td>
data 4
</td>
</tr>
<tr>
<td>
data 1
</td>
<td>
data 2
</td>
<td>
data 3
</td>
<td>
data 4
</td>
</tr>
<tr>
<td>
data 1
</td>
<td>
data 2
</td>
<td>
data 3
</td>
<td>
data 4
</td>
</tr>
</table>
</div>
<div class="layout" >
<div class="layout layoutbacking">
<table>
<tr>
<th>
header 1
</th>
<th>
header 2
</th>
...
CSS
.layout
{
white-space: nowrap; /* this does the trick */
overflow: hidden; /* this prevents the grey divs to overflows */
-moz-border-radius: 15px;
border-radius: 15px;
vertical-align: top;
display: inline-block;
}
.layoutbacking
{
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px;
margin: 5px;
background: #CCCCCC;
}