Question

我有一个表（ table1 ），它只包含th个标签和一个只包含td个标签的表（ table2 ）。（我知道这个设置看起来确实是错误的，但由于应用程序存在一些不同的问题，因此设置方式如此，所以尽量不要担心为什么会这样设置。）

table1 中的每个TH都充当与 table2 中的TD对应的排序按钮。

每个表格的宽度相同，但TH和TD的宽度不同，因此它们的排列不正确。

我需要找到一种方法将每个人TH的宽度与其下方TD的宽度相关联。困难的部分是TH排序按钮是动态的，用户可以根据自己的喜好添加或删除TH，因此宽度需要能够动态更改。我无法弄清楚如何将两者无缝连接在一起。有什么想法吗？

IE：

<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>

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

Link to Fiddle

提前谢谢。

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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我希望你没有很多专栏！

Answer 2

你可以为同时使用同一个班级TD。

Answer 3

这样的事情对你有用吗？

我因为简单而使用了jQuery：

$( "#table2 tr td" ).each(function( index ) {
    $('#table1 th').eq(index).css('width',$(this).width()+'px');
});

演示：https://jsfiddle.net/6u1dyL55/10/

所以，想法是获得td宽度，并将其附加到第一个表中的相应TH（通过索引 - 因为它们是相同的）。

将Table1的宽度连接到Table2 td宽度

3 个答案: