проблема с выравниванием html заголовков и тд ячеек

Question

Я пытаюсь создать небольшую таблицу, которая может прокручиваться, когда под заголовками много тегов tr. Мне удалось заставить его работать правильно только с одним столбцом, но я изо всех сил пытаюсь заставить его работать с более чем одним столбцом, поскольку столбцы не выравниваются. Важно, чтобы размер таблицы не изменился, поскольку я добавляю новые строки, используя jQuery и автоматическую прокрутку.

Я просто хочу, чтобы столбцы thead и tbody были выровнены ...

Вот что у меня есть:

.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: прикреплен к thead и 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>