javascript - 将 Table1 th 宽度连接到 Table2 td 宽度

Question

我有一个表 (table1) 只包含 th 标签和一个表 (table2) 只包含 td 标签。 (我知道这种设置看起来确实不对，但由于应用程序存在一些不同的问题，所以采用这种方式设置，所以尽量不要担心为什么采用这种方式设置)。

table1 中的每个TH 作为排序按钮对应于table2 中的TD。

每个表格的全宽是相同的，但是 TH 和 TD 的宽度不同，导致它们无法正确排列。

我需要找到一种方法将每个单独的 TH 的宽度链接到它下面的 TD 的宽度。困难的部分是 TH 排序按钮是动态的，用户可以根据自己的喜好添加或删除 TH，因此宽度需要能够动态变化。我不知道如何将两者无缝地联系在一起。有什么想法吗？

即:

<table id="table1">
 <thead>
 <th>Sorts 1</th>
 <th>Sorts 2</th>
 <th>Sorts 3</th>
 <th>Sorts 4</th>
 </thead>
</table>
<table id="table2">
 <thead>
 <td>Sort 1</td>
 <td>Sort 2</td>
 <td>Sort 3</td>
 <td>Sort 4</td>
 </thead>
</table>

我创建了一个基本的 Fiddle 来说明什么意思。最后几个 td 被压缩到 Sorts7 列中。我希望 TH 和相应的 TD 始终等于相同的宽度，即使我们添加或删除列也是如此。

Link to Fiddle

提前谢谢你。

编辑:这两个表必须保持分开。我知道这很不幸。 :(

Answer 1

好吧，我不喜欢这个答案，但它确实有效...

您可以做的是使用 jQuery 获取底部列的宽度并将其应用于顶部列 - 如下所示:

$('#top1').css({"width":$("#bottom1").width()});
$('#top2').css({"width":$("#bottom2").width()});
$('#top3').css({"width":$("#bottom3").width()});
$('#top4').css({"width":$("#bottom4").width()});

table, th, td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="table1">
 <thead>
 <th id="top1">Sorts 1</th>
 <th id="top2">Sorts 2</th>
 <th id="top3">Sorts 3</th>
 <th id="top4">Sorts 4</th>
 </thead>
</table>
<br> <!-- To demonstrate that they are separate -->
<table id="table2">
 <tr>
 <td id="bottom1">Sort 1</td>
 <td id="bottom2">Sort 2 With Longer Content</td>
 <td id="bottom3">Sort 3</td>
 <td id="bottom4">Sort 4</td>
 </tr>
 <tr>
 <td id="bottom1">Sort 1</td>
 <td id="bottom2">Sort 2</td>
 <td id="bottom3">Sort 3 With Longer Content</td>
 <td id="bottom4">Sort 4</td>
 </tr>
</table>

我只是希望你没有太多的专栏!