Use multiple tbody inside a single table tag

Use multiple tbody inside a single table tag

sarthaks21sarthaks21 Posts: 41Questions: 8Answers: 0

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?

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • sarthaks21sarthaks21 Posts: 41Questions: 8Answers: 0
    edited 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?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • sarthaks21sarthaks21 Posts: 41Questions: 8Answers: 0

    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'
        }
    
  • sarthaks21sarthaks21 Posts: 41Questions: 8Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

Sign In or Register to comment.