Search code examples
javascripthtml-tablerow

Added row with JS does not align with th

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>

Solution

  • 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>