用 JS 添加的行与 th 不对齐答案

【问题标题】：Added row with JS does not align with th用 JS 添加的行与 th 不对齐
【发布时间】：2023-01-16 17:10:17
【问题描述】：

我正在使用来自网络的表格模板在表格中插入一行（对不起，如果前缀很长，但我想包括它）。问题是新的<td> 没有与表头中的<th> 对齐。我尝试按照here的建议在定义<th>时插入.text-center {text-align: center;}或使用class="sorting text-center"，但这并没有解决问题。

如何将新单元格与表格标题对齐？

function addRow() {
  var tbodyEL = document.getElementById("employer_my_offers_body");
  tbodyEL.innerHTML += `<tr>
                                    <td> 12 </td>
                                    <td> 16 </td>
                                    <td> 50 </td>
                                    <td> received <td>
                                    <td> Later <td>
                                    <td> Empty </td>
                                <tr>`;
}


$(window).on("load resize ", function() {
  var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
  $('.tbl-header').css({
    'padding-right': scrollWidth
  });
}).resize();

table {
  width: 100%;
  table-layout: auto;
}

.tbl-header {
  background-color: rgba(255, 255, 255, 0.3);
}

.tbl-content {
  height: 300px;
  overflow-x: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.text-center {
  text-align: center;
}

th {
  padding: 10px 15px;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}

td {
  padding: 15px;
  text-align: center;
  vertical-align: middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}


/* demo styles */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body {
  background: -webkit-linear-gradient(left, #25c481, #25b7c4);
  background: linear-gradient(to right, #25c481, #25b7c4);
  font-family: 'Roboto', sans-serif;
}

section {
  margin: 30px;
}

form {
  display: inline-block;
}


/* follow me template */

.made-with-love {
  margin-top: 40px;
  padding: 10px;
  clear: left;
  text-align: center;
  font-size: 10px;
  font-family: arial;
  color: #fff;
}

.made-with-love i {
  font-style: normal;
  color: #F50057;
  font-size: 14px;
  position: relative;
  top: 2px;
}

.made-with-love a {
  color: #fff;
  text-decoration: none;
}

.made-with-love a:hover {
  text-decoration: underline;
}

.top-buffer {
  margin-top: 40px;
  /*border-style: solid;
            border-width: thin;
            border-color: rgba(255, 255, 255, 0.3);
            border-spacing: 10px;
            position: relative;*/
}

 ::-webkit-scrollbar {
  width: 6px;
}

 ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

 ::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<button type="button" onclick="addRow()"> AddRow </button>


<section>
  <div class="container-fluid">
    <div class="row" style="max-height: 200px;">
      <div class="table-responsive col-md-12" style="max-height: 200px;">
        <div class="tbl-header">
          <table id="employer_my_offers_table" cellpadding="0" cellspacing="0" border="0">
            <caption> Your offers </caption>
            <thead style="display:table-header-group">
              <tr>
                <th class="sorting text-center">Job ID</th>
                <th class="sorting text-center">Wage</th>
                <th class="sorting text-center">Effort</th>
                <th class="sorting text-center">Status</th>
                <th class="sorting text-center">Action</th>
                <th class="sorting text-center">Worker ID</th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="tbl-content">
          <table cellpadding="0" cellspacing="0" border="0" style="max-height: 120px;">
            <tbody id="employer_my_offers_body">
              <!-- Offers will come in here -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

您如何期望两个单独的表格神奇地对齐它们各自的单元格？

标签： javascript html-table row

【解决方案1】：

首先，您在 JS innerHTML 中缺少一些关闭的 tds。

问题是缺少结束标记会导致生成空的“填充符”tds，从而进一步破坏您的布局。但主要问题是您将新的tr 输入错误的位置。只需将 document.getElementById("employer_my_offers_tbody") 更改为 document.getElementById("employer_my_offers_table") 即可。注意：您可能需要稍微调整一下样式（例如，选择要使用 nth-child() 设置样式的每个表格行）

【讨论】：

【解决方案2】：

在tbodyEL.innerHTML你没有关闭所有<td>和<tr>标签

function addRow() {
  var tbodyEL = document.getElementById("employer_my_offers_body");
  tbodyEL.innerHTML += `<tr>
                                    <td> 12 </td>
                                    <td> 16 </td>
                                    <td> 50 </td>
                                    <td> received </td>
                                    <td> Later </td>
                                    <td> Empty </td>
                                </tr>`;
}


$(window).on("load resize ", function() {
  var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
  $('.tbl-header').css({
    'padding-right': scrollWidth
  });
}).resize();

table {
  width: 100%;
  table-layout: auto;
}

.tbl-header {
  background-color: rgba(255, 255, 255, 0.3);
}

.tbl-content {
  height: 300px;
  overflow-x: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.text-center {
  text-align: center;
}

th {
  padding: 10px 15px;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}

td {
  padding: 15px;
  text-align: center;
  vertical-align: middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}


/* demo styles */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body {
  background: -webkit-linear-gradient(left, #25c481, #25b7c4);
  background: linear-gradient(to right, #25c481, #25b7c4);
  font-family: 'Roboto', sans-serif;
}

section {
  margin: 30px;
}

form {
  display: inline-block;
}


/* follow me template */

.made-with-love {
  margin-top: 40px;
  padding: 10px;
  clear: left;
  text-align: center;
  font-size: 10px;
  font-family: arial;
  color: #fff;
}

.made-with-love i {
  font-style: normal;
  color: #F50057;
  font-size: 14px;
  position: relative;
  top: 2px;
}

.made-with-love a {
  color: #fff;
  text-decoration: none;
}

.made-with-love a:hover {
  text-decoration: underline;
}

.top-buffer {
  margin-top: 40px;
  /*border-style: solid;
            border-width: thin;
            border-color: rgba(255, 255, 255, 0.3);
            border-spacing: 10px;
            position: relative;*/
}

 ::-webkit-scrollbar {
  width: 6px;
}

 ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

 ::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<button type="button" onclick="addRow()"> AddRow </button>


<section>
  <div class="container-fluid">
    <div class="row" style="max-height: 200px;">
      <div class="table-responsive col-md-12" style="max-height: 200px;">
        <div class="tbl-header">
          <table id="employer_my_offers_table" cellpadding="0" cellspacing="0" border="0">
            <caption> Your offers </caption>
            <thead style="display:table-header-group">
              <tr>
                <th class="sorting text-center">Job ID</th>
                <th class="sorting text-center">Wage</th>
                <th class="sorting text-center">Effort</th>
                <th class="sorting text-center">Status</th>
                <th class="sorting text-center">Action</th>
                <th class="sorting text-center">Worker ID</th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="tbl-content">
          <table cellpadding="0" cellspacing="0" border="0" style="max-height: 120px;">
            <tbody id="employer_my_offers_body">
              <!-- Offers will come in here -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

【讨论】：