JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td>City name</td>
<td>Distance (km)</td>
<td>Real latency</td>
<td>Theoretical max</td>
<td>Slowdown factor</td>
</tr>
<tr>
<td>New York</td>
<td>5,585</td>
<td>71</td>
<td>38</td>
<td>1.9</td>
</tr>
<tr>
<td>Lima</td>
<td>10,160</td>
<td>162</td>
<td>68</td>
<td>2.4</td>
</tr>
<tr>
<td>Jakarta</td>
<td>11,719</td>
<td>194</td>
<td>78</td>
<td>2.5</td>
</tr>
<tr>
<td>Cairo</td>
<td>3,513</td>
<td>60</td>
<td>24</td>
<td>2.5</td>
</tr>
<tr>
<td>Bangalore</td>
<td>8,041</td>
<td>144</td>
<td>54</td>
<td>2.7</td>
</tr>
<tr>
<td>St Petersburg</td>
<td>2,105</td>
<td>38</td>
<td>14</td>
<td>2.7</td>
</tr>
<tr>
<td>Bogota</td>
<td>8,500</td>
<td>160</td>
<td>56</td>
<td>2.9</td>
</tr>
<tr>
<td>Lagos</td>
<td>5,006</td>
<td>99</td>
<td>34</td>
<td>2.9</td>
</tr>
<tr>
<td>Buenos Aires</td>
<td>11,103</td>
<td>220</td>
<td>74</td>
<td>3.0</td>
</tr>
<tr>
<td>Moscow</td>
<td>2,508</td>
<td>51</td>
<td>16</td>
<td>3.2</td>
</tr>
<tr>
<td>Sao Paulo</td>
<td>9,473</td>
<td>193</td>
<td>64</td>
<td>3.0</td>
</tr>
<tr>
<td>Shenzhen</td>
<td>9,613</td>
<td>211</td>
<td>64</td>
<td>3.3</td>
</tr>
<tr>
<td>Bangkok</td>
<td>9,543</td>
<td>213</td>
<td>64</td>
<td>3.3</td>
</tr>
<tr>
<td>Hong Kong</td>
<td>9,644</td>
<td>221</td>
<td>64</td>
<td>3.5</td>
</tr>
<tr>
<td>Istanbul</td>
<td>2,504</td>
<td>60</td>
<td>16</td>
<td>3.8</td>
</tr>
<tr>
<td>Lahore</td>
<td>6,298</td>
...
CSS
/* Tables */
table {
margin: 0 auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
margin: 0 auto;
overflow: visible;
border: 1px solid grey;
}
td {
padding-top: 0.5em;
padding-right: 1em;
padding-bottom: 0.5em;
padding-left: 1em;
border: 1px solid grey;
}
th {
border-left: 1px solid grey;
background: #cbcbcb;
}