动态更改表格单元格宽度

Question

我想使用此jfiddle link中的两个表来实现垂直和水平可滚动表。
该表将显示来自mysql数据库的数据。
第一个表的标题与第二张桌子的主体。 CSS用于将两个表对齐在一起。
现在我希望特定列中的单元格宽度相等，具体取决于最长单元格的宽度。例如，使用下面的伪代码。

if(col1.row1.cellWidth > col1.row2.cellWidth)
{
   col1.cellWidth = col1.row1.cellWidth;
}

下面是html表格代码：

<div class="table-header" id="headerdiv">
  <table id="headertable" width="100%" cellpadding="0" cellspacing="20%">
             <thead>
            <tr>
                <th class="center"><strong>Name</strong></th>
                <th class="center"><strong>Department</strong></th>
				<th class="center"><strong>Unit</strong></th>
				<th class="center"><strong>Time Booked</strong></th>
				<th class="center"><strong>Purpose</strong></th>
                            </tr>
           </table>
    </div>
	
	 <div class="table-body" onscroll="document.getElementById('headerdiv').scrollLeft = this.scrollLeft;">
        <table id="bodytable" width="100%" cellpadding="0" cellspacing="0">
            <?php
           if($stmt->execute()) {
                // output data of each row
                while($rows = $stmt->fetch(PDO::FETCH_ASSOC)){ ?>
                     <tbody>
                      <tr>
                        <td class="center"><?php echo $rows['first_name']."  ".$rows['last_name']; ?></td>
                        <td class="center"><?php echo $rows['department']; ?></td>
						<td class="center"><?php echo $rows['unit']; ?></td>
						<td class="center" >
                           <input name="booking_time" type="datetime-local" id="booking_time" value="<?php echo myDate($rows['booking_time']); ?>" size="15">
                         </td>
						<td class="center"><?php echo $rows['purpose']; ?></td>
                         </tr>
                 </tbody>
                        
                    <?php
                }
            }
            ?> 
</table>
</div>

以下是css代码

.outer-container {
    background-color: #ccc;
    position: absolute;
    top:0;
    left: 0;
    right: 300px;
    bottom:80px;
    overflow: visible;

}
.inner-container {
    width: 100%;
    height: 100%;
    position: relative;
}
.table-header {
    float:left;
    width: 100%;
    overflow:hidden;
}
.table-body {
    float:left;
    height: 100%;
    width: inherit;
    overflow-y: scroll;
	padding-right: 16px;
}
.header-cell {
    background-color: yellow;
    text-align: left;
    height: 40px;
}
.body-cell {
    background-color: blue;
    text-align: left;
}


.col1, .col3, .col4, .col5 {
    width:120px;
    min-width: 120px;
}
.col2 {
    min-width: 300px;
}