Html 如何使3个表列在一列中？

我有以下3个表，但正如您所看到的，列不在一行中，我做了以下CSS，但仍然得到相同的输出。那么，如何将不同表的列放在一行中并进行排列呢

我的HTML/CSS代码：

。计算值td{
边界：无；
}
div#time div{
左边缘：-4%；
保证金权利：-4%；
}
表1.1计算值tr td：第一个孩子{
边界：无；
}
表2.1计算值tbody tr td：第一个孩子h4{
字体大小：300；
字母间距：3px；
}
表1.T计算值tbody tr td:非（第一个孩子）{
字号：600；
}
.计算值标题{
字母间距：5px；
字体重量：600！重要；
}
tr#时间行td{
背景色：#22356d；
宽度：30px！重要；
文本对齐：左对齐；
}
tr#时间行td：第一个孩子{
边框左上半径：25px；
边框左下半径：25px；
文本对齐：居中；
}
tr#时间行td：最后一个孩子{
边框右上角半径：25px；
边框右下半径：25px；
}

公平市价
安装
100

149350美元
100%

149350美元
100%

149350美元
交换
100

149350美元
100%

149350美元
时间（月）
0
12
24
清算价值
有秩序的
100

149350美元
100%

149350美元
强迫
100

149350美元
100%

149350美元
100%

149350美元

表格不会以任何方式相互连接，也不会自动对齐。CSS是使它们看起来一致的一种方法。这是一种近似的方法

表格{
宽度：100%；
}
th{
文本对齐：左对齐；
}
运输署{
宽度：9%；
}
td：第一个孩子{
宽度：自动；
}

名字
姓氏
年龄
年龄
年龄
年龄
年龄
很长的名字
史密斯
50
50
50
50
50
前夕
杰克逊
94
94
94
94
94
约翰
雌鹿
80
80
80
80
80
名字
姓氏
年龄
年龄
年龄
年龄
年龄
吉尔
史密斯
50
50
50
50
50
前夕
杰克逊
94
94
94
94
94
约翰
雌鹿
80
80
80
80
80
名字
姓氏
年龄
年龄
年龄
年龄
年龄
吉尔
史密斯
50
50
50
50
50
前夕
杰克逊
94
94
94
94
94
约翰
雌鹿
80
80
80
80
80

表格不会以任何方式相互连接，也不会自动对齐。CSS是使它们看起来一致的一种方法。这是一种近似的方法

表格{
宽度：100%；
}
th{
文本对齐：左对齐；
}
运输署{
宽度：9%；
}
td：第一个孩子{
宽度：自动；
}

名字
姓氏
年龄
年龄
年龄
年龄
年龄
很长的名字
史密斯
50
50
50
50
50
前夕
杰克逊
94
94
94
94
94
约翰
雌鹿
80
80
80
80
80
名字
姓氏
年龄
年龄
年龄
年龄
年龄
吉尔
史密斯
50
50
50
50
50
前夕
杰克逊
94
94
94
94
94
约翰
雌鹿
80
80
80
80
80
名字
姓氏
年龄
年龄
年龄
年龄
年龄
吉尔
史密斯
50
50
50
50
50
前夕
杰克逊
94
94
94
94
94
约翰
雌鹿
80
80
80
80
80

您能不能将它们放在一张表中？否则，只需设置td:first child的宽度，为什么您希望有3个独立的表而不是1个？请制作一个jsfiddle以获得更好的答案。您不能将它们放在一个表中吗？否则，只需设置td:first child的宽度，为什么您希望有3个独立的表而不是1个？请制作一个jsfiddle以获得更好的答案。谢谢，但是由于一些设计问题，我不得不使用div中的中间表，您的建议真的帮不上忙！还有其他方法吗？谢谢，但是由于一些设计问题，我不得不使用div中的中间表，你的建议真的帮不上忙！还有别的办法吗？