对齐html标题和td单元格时出现问题

Question

我正在尝试制作一个小表，当标题下有很多tr标记时，它可以滚动。我已经设法让它只在一列中正确工作，但由于列不对齐，我很难让它在多列中工作。表的大小保持原样是很重要的，因为我使用jQuery和自动滚动来添加新行。

我只想让剧院和剧院的柱子对齐。。。

以下是我目前所拥有的：

.grid_background_comm {
background-color: rgb(173, 173, 173);
padding: 0px;
margin-left: 10px;
margin-right: 10px;
width: 950px;
height: 90px;
}
.grid_background_comm thead {
display: block;
text-align: left;
width: 950px;
}
.grid_background_comm th {
padding-left: 4px;
width: 950px;
}
.grid_comm {
display: block;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
width: 950px;
height: 85px;
}
.grid_comm tr {
background-color: rgb(231, 231, 231);
display: block;
width: 935px;
margin-left: 3px;
margin-right: 10px;
padding-left: 4px;
padding-right: 4px;
}
.grid_header {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(44, 44, 44);
padding: 0px;
margin: 0px;
width: 960px;
height: 20px;
}

<table id="table_comm" class="grid_background_comm">
<thead>
<th id="1" class='grid_header'>Line</th>
<th id="2" class='grid_header'>I/O</th>
</thead>
<tbody id="gv_comm_data" class="grid_comm">
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
</tbody>
</table>

Answer 1

display:块附加到影响其默认行为的ad和tr。你可以删除它们https://codepen.io/rohinikumar4073/pen/zYGKqZL

.grid_background_comm {
background-color: rgb(173, 173, 173);
padding: 0px;
margin-left: 10px;
margin-right: 10px;
width: 950px;
height: 90px;
}
.grid_background_comm thead {
text-align: left;
width: 950px;
}
.grid_background_comm th {
padding-left: 4px;
width: 950px;
}
.grid_comm {
overflow-y: auto;
overflow-x: hidden;
text-align: left;
width: 950px;
height: 85px;
}
.grid_comm tr {
background-color: rgb(231, 231, 231);
width: 935px;
margin-left: 3px;
margin-right: 10px;
padding-left: 4px;
padding-right: 4px;
}
.grid_header {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(44, 44, 44);
padding: 0px;
margin: 0px;
width: 960px;
height: 20px;
}

<table id="table_comm" class="grid_background_comm">
<thead>
<tr>
<th id="1" class='grid_header'>Line</th>
<th id="2" class='grid_header'>I/O</th>
</tr>
</thead>
<tbody id="gv_comm_data" class="grid_comm">
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
</tbody>
</table>