Added row with JS does not align with th-CodePudding

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 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 >
    <div  style="max-height: 200px;">
      <div  style="max-height: 200px;">
        <div >
          <table id="employer_my_offers_table" cellpadding="0" cellspacing="0" border="0">
            <caption> Your offers </caption>
            <thead style="display:table-header-group">
              <tr>
                <th >Job ID</th>
                <th >Wage</th>
                <th >Effort</th>
                <th >Status</th>
                <th >Action</th>
                <th >Worker ID</th>
              </tr>
            </thead>
          </table>
        </div>
        <div >
          <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>

CodePudding user response：

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  type="button">AddRow</button>

<div >
  <table>
    <caption>Your offers</caption>
    <thead>
      <tr>
        <th >Job ID</th>
        <th >Wage</th>
        <th >Effort</th>
        <th >Status</th>
        <th >Action</th>
        <th >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>

CodePudding user response：

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)