Css - 保持两张宽度相同的桌子

Question

我有两个html表，一个在另一个之上，宽度都是100％，类似

<div>
    <table>table content...</table>
    <table>table content...</table>
<div>

当页面足够大时，两个表具有相同的宽度。但是当我限制页面时，在某一点上，两个表中的一个停止收缩而另一个表继续，导致这两个表不再具有相同的宽度。

您可以在行动here中看到它。

有没有办法用纯css告诉两个表保持相同的宽度？更好的是，当第一个表停止收缩时，第二个表也会停止。

Answer 1

将以下内容添加到CSS代码中：

.t-scroller {
    display:inline-block;
    clear:both;
}

请参阅 JSFiddle 。

注意：这个是DIV级别的，我不知道你是否能负担得起。但这应该可以解决问题......

试一试。希望这会有所帮助...

Answer 2

将table-layout: fixed;添加到表格中。

Updated Fiddle

Answer 3

您还可以为表分配minimum-width，这样两个表都不能小于特定大小。因此，您可以指定顶部表停止收缩的大小。

table-layout: fixed;有效，但是这些表都会缩小，直到你看不到每个单元格中的文本为止，最小宽度会保持表格单元格的可读性

demo

在小提琴中我更新了你的桌子类：

.table {
  width: 100%;
  min-width: 550px; //added this min-width property
  margin-bottom: 20px;
}