Question

我们说我有两张桌子，其间有一些文字：

<table>
    <tr><td>A</td><td>0000</td><td>Some text goes here...</td></tr>
    <tr><td>B</td><td>11</td><td>... and here</td></tr>
</table>

Some text goes here.

<table>
    <tr><td>CCC</td><td>1</td><td>Some text goes here...</td></tr>
    <tr><td>DDD</td><td>0</td><td>... and here</td></tr>
</table>

是否可以使这两个表具有相同的列宽？那就是我希望表1的第一列是3个字符（例如CCC）大;我希望表2的第二列是4个字符（例如0000）大。

请注意，我不知道每列的宽度应该是多少，因此我不想事先在CSS文件中定义它。我对使用Javascript的动态方法更感兴趣。

不同的步骤如下：

构建两个表;
获取第1列和第2列的最大宽度;
使用这些值更新表格的CSS属性。

Answer 1

（把ids放在你的桌子上）

您可以使用jQuery selectors获取您的tds的所有宽度值，如：

 var maxWidth = 0;
     $("#table1 td").each(function() {
      var width = $(this).css("width");
      if(width > maxWidth) maxWidth = width;
     });

然后
```
 $("#table1 td").css("width", width);
```

Answer 2

使用JQuery，您可以执行以下操作：

 $(document).ready(function() {
     var tdWidth = 0;
     $('td').each(function() {
        width = $(this).width();
        if(width > tdWidth) tdWidth = width;
     });

     $('td').css("width", tdWidth);
 });

对齐不同表格中的列

2 个答案: