Html 左对齐两个表，同时保持第一个（流体宽度）居中

该页面包括两个表格（高尔夫成绩）。第一个总是比第二个宽，包括两列名称，因此其总宽度因联赛而异。第二个表仅包含数字，其宽度将保持不变

我想对齐两个表的左边缘，同时保持第一个表居中

如果我知道第一个表的宽度，那么问题很简单，使用css将html宽度设置为表的宽度，并将两个表的左边距设置为0。但是，随着宽度的变化，表格会随着内容的不同而移动。

---

我如何解决这个难题？

这里有一个相当简单和可靠的方法来解决这个问题

首先，创建一个包装器元素来包含两个表，在我的示例中为

.wrap

在

.wrap

上，设置

显示：表格

和

边距：0自动

。这将强制

.wrap

收缩以适应宽度，然后边距技巧将使块居中

默认情况下，两个子表将向左对齐

.wrap{
显示：表格；
边框：1px蓝色虚线；
保证金：0自动；
}
桌子{
边框：1px点蓝色；
利润率：20px；
}
表td{
边框：1px纯色灰色；
}

具有长名称的第一个宽列
第二个宽列，名称很长
第一短列
第二短列

一种方法是在具有

display:inline block

的表周围添加一个包装器。这将使包装收缩以适应最大的桌子。它还允许您通过将父对象（例如

主体

）设置为

文本对齐：居中

，使其水平居中

为了确保表格中的文本不居中，必须将包装内容设置为

text align:left

正文{
文本对齐：居中；
}
.包装纸{
显示：内联块；
边框：1px纯红；
文本对齐：左对齐；
}
表，tr，td{
边框：1px纯蓝色；
}

名称核心
约翰尼
12
吉米
12.412.002
6.
3.
5.
4.

请添加您已有的代码，并解释您迄今为止为解决此问题所做的努力，这些都非常有效！！表格现在在所有浏览器上都能正确显示。要学的东西太多了，时间太少了。记住接受和/或向上投票，这样人们就知道问题得到了回答。欢迎来到SO！