Align the body of the table with the header after populating the table with values

Issue :

  • The data in the table body is misaligned with the headers of each column.

Solution :

var test_insert1 = '<tr>' +
  '<td  class="td-trad-9">762261</td>' +
  '<td  class="td-trad-7">1.16176</td>' +
  '<td class="td-trad-8">1.1618</td>' +
  '<td class="td-trad-1">2018-08-08</td>' +
  '<td class="td-trad-2">03:32</td>' +
  '<td class="td-trad-3">This is a test long value</td>' +
  '<td class="td-trad-4">1.00</td>' +
  '<td class="td-trad-5">Up</td>' +
  '<td class="td-trad-6">0.80</td>' +
  '</tr>'+
  '<tr>' +
  '<td  class="td-trad-9">456985</td>' +
  '<td  class="td-trad-7">1.65476</td>' +
  '<td class="td-trad-8">1984218</td>' +
  '<td class="td-trad-1">2018-08-08</td>' +
  '<td class="td-trad-2">03:32</td>' +
  '<td class="td-trad-3">This is a test value</td>' +
  '<td class="td-trad-4">10000</td>' +
  '<td class="td-trad-5">Up</td>' +
  '<td class="td-trad-6">1.00</td>' +
  '</tr>';

$('#add').click(function() {
  $('#new_table_test_body').html(test_insert1);
});
#new_table_test {
  width: auto;
  table-layout: fixed;
  border-collapse: collapse;
  /* color:white; */
  text-align: center;
  vertical-align: middle;
}

#new_table_test tbody::-webkit-scrollbar {
  width: 0px;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */
}

#new_table_test tbody {
  display: block;
  width: 100%;
  overflow: auto;
  height: 100px;
}

#new_table_test thead tr {
  display: block;
}

#new_table_test thead {
  background: black;
  color: #fff;
}

#new_table_test th,
#new_table_test td {
  padding: 5px;
  text-align: left;
  width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="new_table_test">
  <thead id="new_table_test_header">
    <tr>
      <th>Header 1</th>
      <th>Header Two</th>
      <th>Head Three</th>
      <th>H4</th>
      <th>Header 5</th>
      <th>Heads 6</th>
      <th>Header seven</th>
      <th>Header 8</th>
      <th>Header Nine</th>
    </tr>
  </thead>
  <tbody id="new_table_test_body"></tbody>
</table>

<button id="add"> Add Details </button>

-- EDIT --

Additional:

Specifications:

  • The table body can be scrolled
  • Headers remain fixed while scrolling
  • Width adjusts automatically based on content

Check out an updated fiddle for more details on this problem: http://jsfiddle.net/9sjyvb5w/50

Answer №2

Even though @bahman's answer is impressive, I decided to take a different approach using the flex property.

My Approach : Before loading the data, I made the <thead> visible. However, upon clicking the button, I hid the <thead> and only displayed the <tbody> with the first row containing the header-values. I styled the first row to match the header.

Issues with this approach :
It involves more manipulations and complexity as it requires adding the first row as a header.

var test_insert1 = 
'<tr>' +
  '<td  class="td-trad-9">Header 1</td>' +
  '<td  class="td-trad-7">Header Two</td>' +
  '<td class="td-trad-8">Head Three</td>' +
  '<td class="td-trad-1">H4</td>' +
  '<td class="td-trad-2">Header 5</td>' +
  '<td class="td-trad-3">Header 6</td>' +
  '<td class="td-trad-6">Head 45</td>' +
  '</tr>'+'<tr>' +
  '<td  class="td-trad-9">762261</td>' +
  '<td  class="td-trad-7">1.16176</td>' +
  '<td class="td-trad-8">1.1618</td>' +
  '<td class="td-trad-1">2018-08-08</td>' +
  '<td class="td-trad-2">03:32</td>' +
  '<td class="td-trad-3">This is a test long value</td>' +
  '<td class="td-trad-6">0.80</td>' +
  '</tr>'+
  '<tr>' +
  '<td  class="td-trad-9">456985</td>' +
  '<td  class="td-trad-7">1.65476</td>' +
  '<td class="td-trad-8">1984218</td>' +
  '<td class="td-trad-1">2018-08-08</td>' +
  '<td class="td-trad-2">03:32</td>' +
  '<td class="td-trad-3">This is a test value</td>' +
  '<td class="td-trad-6">1.00</td>' +
  '</tr>';

$('#add').click(function() {
  $('#new_table_test_body').html(test_insert1);
  $('#new_table_test_header').hide();
});
#new_table_test {
  width: auto;
  table-layout: fixed;
  border-collapse: collapse;
  /* color:white; */
  text-align: center;
  vertical-align: middle;
  display:flex;
  flex-direction: column;
  justify-content: center;
}
#new_table_test_header,
#new_table_test_body {
  display:flex;
  flex-direction: row;
}

#new_table_test_body > tr:first-child {
background: black;
    color: white;
    font-weight: bold;
}
#new_table_test tbody::-webkit-scrollbar {
  width: 0px;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */
}

#new_table_test tbody {
  display: block;
  width: 100%;
  overflow: auto;
  
}

#new_table_test thead tr {
  display: block;
}

#new_table_test thead {
  background: black;
  color: #fff;
}

#new_table_test th,
#new_table_test td {
  padding: 5px;
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="new_table_test">
  <thead id="new_table_test_header">
    <tr>
      <th>Header 1</th>
      <th>Header Two</th>
      <th>Head Three</th>
      <th>H4</th>
      <th>Header 5</th>
      <th>Heads 6</th>
      <th>Head 45</th>
    </tr>
  </thead>
  <tbody id="new_table_test_body"></tbody>
</table>

<button id="add"> Add Details </button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing the Div id stored in a session parameter

Is there a way to store the id (div id) into a session variable? This is an example of my code below: <div class='fieldRow'>Options </div> <div id="abcde"></div> <div class='Row'> <?php $user_typ ...

Utilizing Browserify routes and configuring Webstorm

When building my project using gulp and browserify, I made use of path resolution for easier navigation. By following this guide, I configured browserify as shown below: var b = browserify('./app', {paths: ['./node_modules','./src ...

Tips for concealing a div when the mouse is moved off it?

My goal is to create a simple hover effect where hovering over an image within a view filled with images displays an additional div. This part works as expected. However, I'm facing issues when trying to hide the same div when the user moves out of t ...

Unforeseen anomalies arise when deleting an element from an array in a React application

I've been scouring for a solution, but I could really use some human guidance. I have a basic form where users can input additional fields. They also have the option to delete irrelevant fields. The problem arises when trying to remove these fields. ...

calls to res.send and res.render

I'm currently trying to determine if it's possible to use res.send(data) and res.render('reports') simultaneously in my code. To provide more details, when I navigate to '/reports', on the server side I am executing a REST ca ...

Why is TypeScript giving an error about an undefined object key, even though the key was assigned a value in the previous command?

type MaybeThereIsAValue = { [p: string]: string | undefined } ... let bar: MaybeThereIsAValue = {}; const key = "carpe"; bar[key] = "diem"; const why = bar[key]; // why is string | undefined I am confused as to why why is showing ...

How can I clear a text box in Angular.js when the Google Autocomplete event is triggered?

Seeking assistance in AngularJS to clear the textbox value upon triggering the google map autocomplete event. Can anyone provide guidance? Here is the HTML code - <input ng-model="deployText" id="search_execute" class="form-control" type="text" place ...

Is there a way to link the req.session.user from express-session to a chai-http request?

When it comes to my API, it relies on the express-session module for authentication. Each request is verified based on whether the req.session.user object exists within the request. The implementation can be seen in the snippet below: app.use(function(req ...

Configuring Vue.js watchers inside a for loop

Exploring the dynamic addition of watchers in Vue.js. The discrepancy between what is desired and what actually happens is demonstrated below in the commented section. As a casual coder, I believe my issue lies more in grasping JavaScript basics rather t ...

Function in Typescript used for checking types and catching compilation errors from external sources

Fact: I am currently using TS version 2.3.4. I have developed a function that checks if a variable is defined (it takes the parameter variable and returns 'undefined' !== typeof variable). It's quite simple. export function IsDefined(variab ...

Husky and lint-staged failing to run on Windows due to 'command not found' error

I'm facing issues with getting husky and lint-staged to function properly on my Windows 10 system. Here's how my setup looks like: .huskyrc.json { "hooks": { "pre-commit": "lint-staged" } } .lintstagedrc ( ...

TypeScript Generic Functions and Type Literals

Everything seems to be running smoothly: type fun = (uid: string) => string const abc: fun = value => value const efg = (callback:fun, value:string) =>callback(value) console.log(efg(abc, "123")) However, when we try to make it generic, we e ...

The layout consists of two divs: one with a fixed height, while the other dynamically adjusts to occupy the

I am facing an issue with two div elements within a parent container. One div has a fixed height, and the other should fill up the remaining space in the parent container. The height of the parent container is dynamic and can vary between 100px, 200px, or ...

What is the trick to getting the <label> and <input> elements to show up side by side in an HTML form?

I am designing a registration form for a new website. My goal is to have each label and its corresponding input element displayed on the same line. Here's the CSS code I'm using: #registration-form { background-color: #FFF; height: 600px; ...

AngularJS and IE8 don't play nice when it comes to handling dynamic content

Below is the code snippet I am working with: <blockquote class='mt20'> <p><span>&ldquo;</span><span>{{iq.quote}}</span><span>&rdquo;</span></p> <footer><cite class="d ...

Displaying Image from Jquery Ajax Response

I have a PHP script that can resize images with specified dimensions by passing the width and height as variables like so: resize.php?width=100&height=200. The content-type of this PHP script is set to image/jpg. Additionally, I have an HTML page wher ...

Scraping Data: A guide to extracting width values from CSS style tags using Scrapy and CSS selectors

I've recently started learning scrapy and I'm struggling to extract the width from a div using a CSS Selector. No matter how hard I try, I can only find solutions using xpath instead of css selectors. Here is the HTML code snippet: <div clas ...

Tips for centering a <div> vertically within another <div> ?

I have a project to develop a shopping cart, and I am currently working on aligning my item total in the center of its container. Here is the code snippet I have so far: .itemInfo { display: table; width: 100%; } .itemTotal { display: table-cel ...

Using Jquery to add elements one by one

Here is the Code for my project: Displayed below is the content of my CSV file: Item, Quantity, Price; LED, 100, $10; PIR, 1, $5; DS18B20, 10, $5; This segment showcases the jquery file I've composed: $(document).ready(function() { $.ajax({ ...

When attempting to compress JavaScript with uglify-js, an unexpected token error occurs with the symbol ($)

When attempting to compress Bootstrap 4 js file using uglify-js, I encountered an error. The error message reads as follows: "Parse error at src\bootstrap\alert.js:1,7 import $ from 'jquery' ERROR: Unexpected token: name ($)". Now I am ...