创建并对齐2个html表

Question

我想用2家商店的营业时间创建2张桌子。如果空间允许，我希望他们在页面中间彼此对齐。否则，我希望它们在彼此之间居中对齐吗？由于某些原因，这确实不起作用。我正在使用Saas解决方案，但无法访问CSS文件，因此需要使用内联CSS？有人可以帮我吗？

    <div style="width: 100%; padding: 5%; display: flex; justify-content: center;">
<div style="padding: 2%;">
<h3 style="text-align: center;">Rotterdam</h3>
<table style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<tbody>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Maandag</td>
<td style="width: 50%; height: 15px;">12:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Dinsdag </td>
<td style="width: 50%; height: 15px;">10:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Woensdag </td>
<td style="width: 50%; height: 15px;">10:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Donderdag</td>
<td style="width: 50%; height: 15px;">10:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Vrijdag</td>
<td style="width: 50%; height: 15px;">10:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Zaterdag</td>
<td style="width: 50%; height: 15px;">10:00 - 17:30 </td>
</tr>
<tr style="height: 15px;">
<td style="width: 50%; height: 15px; text-align: left;">Zondag</td>
<td style="width: 50%; height: 15px; text-align: left;">12:00 - 17:30</td>
</tr>
</tbody>
</table>
</div>
<div style="padding: 2%;">
<h3 style="text-align: center;">Capelle a/d IJssel</h3>
<table style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<tbody>
<tr style="height: 13px; text-align: left; align: center;">
<td style="width: 50%; height: 13px;">Maandag</td>
<td style="width: 50%; height: 13px;">12:00 - 17:30</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Dinsdag</td>
<td style="width: 50%; height: 15px;">09:30 - 17:30</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Woensdag</td>
<td style="width: 50%; height: 15px;">09:30 - 17:30</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Donderdag</td>
<td style="width: 50%; height: 15px;">09:30 - 17:30</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Vrijdag</td>
<td style="width: 50%; height: 15px;">09:30 - 21:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Zaterdag</td>
<td style="width: 50%; height: 15px;">09:30 - 17:00</td>
</tr>
<tr style="height: 15px;">
<td style="width: 50%; height: 15px; text-align: left;">Zondag</td>
<td style="width: 50%; height: 15px; text-align: left;">Gesloten</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

您只需要添加

    box-sizing: border-box;

至主div：这是告诉浏览器计算子级宽度，并在该div内保留剩余宽度。

关于响应度，您应该使用media queries更改对齐方式