Added row with JS does not align with th

Question

I am inserting a row in a table using a table template from the web (sorry if the prefix is long, but I wanted to include it). The problem is that the new <td> are not aligned with the <th> in the table head. I tried to insert .text-center {text-align: center;} or using class="sorting text-center" when defining <th> as suggested here, but this did not solve the problem.

How can I align the new cells with the table heading?

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>

Answer 1

Besides your typos (unclosed <td> tags)...

• Use only one HTMLTableElement
• Never use inline on* handlers. Use JS's .addEventListener() or in your case jQuery's .on() method
• Don't import the jQuery library twice
• Use the jQuery $() generator to create new elements like your Rows
• Use appendTo to append an element into a target element
• Use $("#someID") instead of document.getElementById since you already use jQuery
• Use Fixed table head - CSS-only as a solution for the desired sticky TH elements
• Improve the CSS

const $tbody = $("#employer_my_offers_body");

const addRow = () => {
  const $row = $("<tr/>", {
    appendTo: $tbody,
    html: `<td>12</td>
      <td>16</td>
      <td>50</td>
      <td>received</td>
      <td>Later</td>
      <td>Empty</td>`,
  });
};

$(".addRow").on("click", addRow);

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
::-webkit-scrollbar {
  width: 6px;
  height: 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);
}

body {
  background: linear-gradient(to right, #25c481, #25b7c4);
  font-family: 'Roboto', sans-serif;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table-sticky {
  max-height: 200px;
  overflow: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.table-sticky th {
  position: sticky;
  top: 0;
  background-color: #67d2bd;
}

td,
th {
  padding: 10px 15px;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}

<button class="addRow" type="button">AddRow</button>

<div class="table-responsive table-sticky">
  <table>
    <caption>Your offers</caption>
    <thead>
      <tr>
        <th class="sorting">Job ID</th>
        <th class="sorting">Wage</th>
        <th class="sorting">Effort</th>
        <th class="sorting">Status</th>
        <th class="sorting">Action</th>
        <th class="sorting">Worker ID</th>
      </tr>
    </thead>
    <tbody id="employer_my_offers_body"></tbody>
  </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Answer 2

First, you are missing some closing tds in your JS innerHTML.

The problem was that the lack of closing tags resulted in generating 'filler' empty tds, resulting in ruining your layout even more. But the main problem is that you are inputting the new tr into the wrong place. Simply change document.getElementById("employer_my_offers_tbody") to document.getElementById("employer_my_offers_table") and you are good to go.

Note: you might need to play a bit with the styling (select each table rows you want to style with nth-child() for example, not all at once)