Javascript中HTML表格列宽的统一

我想用JavaScript统一两个

表。
我这样做是因为一个表包含另一个表的标题。
或者也许还有其他方法可以做到这一点

我有：

<table>
<tr>
  <td>ID</td>
  <td>Model</td>
  <td>Brand</td>
</tr>
</table>


身份证件
模型
烙印

及


1.
宝马
320
2.
奥迪
A4
3.
某种车
非常长的名字要存在

表2中的列宽是由输入文本的长度定义的。
我需要它的标题长度与表1相同。
在javaScript中

var innerTable = document.getElementById('myTable');
var headerTable = document.getElementById('header');
var totalColumn = headerTable.rows[0].cells.length;

for (var i = 0; i < totalColumn; i++) {
    var innerTableWidth = innerTable.rows[0].cells[i].offsetWidth
    var headerTableWidth = headerTable.rows[0].cells[i].offsetWidth
    if (innerTableWidth < headerTableWidth)
    innerTable.rows[0].cells[i].width = headerTableWidth;
    else
    headerTable.rows[0].cells[i].width = innerTableWidth;

}

var innerTable=document.getElementById（'myTable'）；
var headerTable=document.getElementById（'header'）；
var totalColumn=headerTable.rows[0].cells.length；
对于（变量i=0；i

HTML是

<table id="header">
    <tr>
        <td>ID</td>
        <td>Model</td>
        <td>Brand</td>
    </tr>
</table>
<table id="myTable">
    <tr>
        <td>1</td>
        <td>BMW</td>
        <td>320</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Audi</td>
        <td>A4</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Some_kind_of_car</td>
        <td>Very_long_name_to_exist</td>
    </tr>
</table>


身份证件
模型
烙印
1.
宝马
320
2.
奥迪
A4
3.
某种车
非常长的名字要存在

两个表的宽度可以相同。@justinI需要列宽由该列中文本的长度定义。……您可以使用javascript来实现。是的，我知道我可以做到，但如何做到这一点？看看这一个。这是我制作的一个版本，但Roshan更快：。它还显示了如何包括填充/边框。是的，我忘了添加填充/边框。你的小提琴解比我好。应该把它作为答案贴出来。
<table id="header">
    <tr>
        <td>ID</td>
        <td>Model</td>
        <td>Brand</td>
    </tr>
</table>
<table id="myTable">
    <tr>
        <td>1</td>
        <td>BMW</td>
        <td>320</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Audi</td>
        <td>A4</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Some_kind_of_car</td>
        <td>Very_long_name_to_exist</td>
    </tr>
</table>