Html 使两个表的最后一列宽度相同

我有两个表。我想使表A的最后一列的宽度与表B的最后一列的宽度相同

注意：

• 两张桌子的宽度相同

如何做到这一点

表A：

<table>
<tr>
  <td>First column</td>
  <td>Second column</td>
  <td>Third column</td>
  <td>Fourth column</td>
</tr>
<tr>
  <td>More data for the first column</td>
  <td>More data for the second column</td>
  <td>More data for the third column</td>
  <td>More data for the fourth column</td>
</tr>
</table>

第一列
第二列
第三纵队
第四栏
第一列的更多数据
第二列的更多数据
第三列的更多数据
第四列的更多数据

表B：

<table>
<tr>
  <td>First column</td>
  <td>Second column</td>
  <td>Third column</td>
  <td>Fourth column</td>
  <td>Fifth column</td>
</tr>
<tr>
  <td>More data for the first column</td>
  <td>More data for the second column</td>
  <td>More data for the third column</td>
  <td>More data for the fourth column</td>
  <td>More data for the fifth column</td>
</tr>
</table>

第一列
第二列
第三纵队
第四栏
第五纵队
第一列的更多数据
第二列的更多数据
第三列的更多数据
第四列的更多数据
第五栏的更多数据

您可以使用：最后一个子选择器来实现这一点

方法1：仅使用css

tr td:last-child {
    width:100px;
}

方法2：使用Js 在调整窗口大小时，获取第一个表最后一列的宽度，并将其设置为第二个表。如果需要，处理边框、填充、边距调整

请参阅下面的代码片段

window.onload=calWidth；
window.onresize=function（）{
calWidth（）；
}
函数calWidth（）{
var colWidth=document.querySelector（'table1 tr td:last child'）。offsetWidth；
var-borderwidth=4；
document.querySelector（“#table2 tr td:last child”）.style.width=（colWidth-borderwidth）+“px”；
}

trtd{
边框：纯色1px黑色
}

第一列
第二列
第三纵队
第四栏
第一列的更多数据
第二列的更多数据
第三列的更多数据
第四列的更多数据
第一列
第二列
第三纵队
第四栏
第五纵队
第一列的更多数据
第二列的更多数据
第三列的更多数据
第四列的更多数据
第五栏的更多数据

请告诉管理员这些值是动态添加的。使用JS，获取并设置宽度。您能更具体一些吗？如果希望两列的宽度相同，可以在两列上设置固定宽度。。或者希望两个表具有相同的宽度？两个表具有相同的宽度，我希望表A最后一列的宽度等于表B最后一列的宽度，并动态调整大小。只有使用css解决此问题时，才能固定宽度。或者，您需要使用javascript跟踪设置为另一个表的窗口调整大小事件ans上的列宽。