如何并排放置桌子？答案

【问题标题】：How can I set the tables side by side?如何并排放置桌子？
【发布时间】：2021-07-07 23:16:07
【问题描述】：

如何将桌子并排放置？我是一个该死的菜鸟，我知道有更优雅的方法来编写我的代码，我很感激你的意见，我把我的代码贴在了 pastebin 上，因为我在这里遇到了一个奇怪的错误

我的 HTML 代码：https://pastebin.com/gq73n05Qenter code here

这就是我的网站的样子，低于我想要的样子：https://imgur.com/a/Fa5No00

【问题讨论】：

【解决方案1】：

因此，在我看来，将两张表并排放置的最佳方法是将它们放入 div 中。你会在你的第一个表（你的 pastebin 中的第 32 行）之前添加一个 div，如下所示：

<div class="column">
<!---your left hand table goes in here --->
</div>

然后您对第二个表执行完全相同的操作（第 59 行的新 div，与上述相同的类）。

<div class="column">
<!---your right hand table goes in here --->
</div>

然后您添加一些样式规则来管理您的两个新 div。我强烈建议您在页面顶部的某个部分执行此操作。

<style>
.column {
display:inline-block;
width:50%;
float:left;
}
</style>

如果你想内联这些样式，那么每个 div 的开头应该是这样的：

<div style="display:inline-block;width:50%;float:left;">

这将使列按您的意愿并排显示。

你应该注意，你会遇到其他麻烦。您在表格和表格单元格中硬编码了许多“宽度”规则，这些规则会影响页面的响应能力，一般来说，除非您正在发送 html 电子邮件，否则您真的想避开用于布局目的的表格。

如果您想看到它的最佳实践实现，w3schools.com 上有这个：https://www.w3schools.com/howto/howto_css_table_side_by_side.asp 它的外观非常优雅，可能会很有用。

祝你好运！

【讨论】：