html - 创建并对齐 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 中的剩余宽度。

为了提高响应速度，您应该使用媒体查询 来更改对齐方式