Use multiple tbody inside a single table tag

sarthaks21 · June 2021

Hey all, I have a page in which there are 3 tables (having same number of columns) which have to be vertically aligned. I am facing a lot of issues in aligning them. I was wondering in I could use the same table with different tbody tags so that alignment is maintained throughout. I was using table-layout: fixed, it worked for a couple of months but I think due to a chrome update it's not working anymore.
Can we initialize a datatable in a tbody tag?

colin · June 2021

It might be related to this thread, so it would be worth checking on that.

But yep, you can put a table inside any DOM element and initialise DataTables against it,

Colin

sarthaks21 · June 2021

Yeah even I am facing issue since chrome 91 has been released. The webpage was working fine (tables were perfectly aligned) till the moment chrome got updated. I have another computer on which chrome 90 is installed and the tables are perfectly aligned. Any idea how to fix it?

colin · June 2021

It would be worth keeping an eye on that other thread as Allan is actively working on the problem and will report back there.

Colin

sarthaks21 · June 2021

Thanks, will keep tabs on the thread.
Can you please show the syntax to initialize datatable inside a tbody tag?
I'm trying to do something similar to this :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>The thead, tbody</h1>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  
  <tbody>
    <tr>
      <td>2nd tbody Jan</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>2nd tbody February</td>
      <td>$80</td>
    </tr>
  </tbody>
 </table>

</body>
</html>

This is a sample, the data will be supplied by ajax such as

  "ajax": {
        "url": "static/tableviewer/ajax/table_contents.json",
        'dataSrc': 'data_root'
    }

sarthaks21 · June 2021

Currently I initialize my table like this,

var top_level_table = $('#A_L1').DataTable({
    //serverSide: true,
    "ajax": {
        "url": "static/temp/temp_f.json",
        'dataSrc': 'data_root'
    },
    searching: false,
    paging: false,
    bInfo: false,
    fixedHeader: true,
    columns: columns_datatable,
    responsive: true
});

I want to initialize this in a tbody tag

kthorngren · June 2021

I don't understand you question but hopefully this will help. The Datatables HTML requirements doc states that Datatables needs a properly formatted table with a thead and a single tbody. Datatables won't work properly with the table you show as it contains multiple tbody elements.

You can create a table inside a td and initialize it as a Datatable.

Kevin

Use multiple tbody inside a single table tag

Use multiple tbody inside a single table tag

Answers

Howdy, Stranger!

Categories

DataTables

Use multiple tbody inside a single table tag

Use multiple tbody inside a single table tag

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables