如何水平并排保持两个表？

Question

我在 HTML 页面上有两个水平对齐的表格，一个在左边，另一个在右边，当浏览器最大化时它们看起来很好，但当浏览器的大小时它们失去了水平对齐方式window 减少了。我对两个表都使用了以下 CSS。

Table 1

.viewTable {   
    background-color: #eeeff4 !important;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
    width: 79% ;
    margin-left:0;
    float: left;
    clear:both;
}

Table 2

.settleViewTable {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
    width: auto;
    margin-right:10px;
    margin-left:10px;
    float: right;
}

当 window 大小减小时，我可以知道一个更好的方法来实现这一点而不会丢失对齐吗？

Answer 1

您将 table 1 设置为 width:79% 并且 table 2 将 10px 的左边距和右边距都设置为 20px，因此宽度table 2 将是 width:calc(21% - 20px); 这将确保两个 table 并排浮动。

了解更多关于 CSS calc() - https://developer.mozilla.org/en-US/docs/Web/CSS/calc

如何水平并排保持两个表？

How to maintain two tables side by side horizontally?

html

css

html-table