27676

HTML Tables - can I have an additional tbody before the thead?

Question:

I need add to some elements on top of a table in line with the columns of the said table.

This table contains a <thead> (which is required due to jquery.tablesorter plugin). I assumed that if I put another <tbody> on top of the <thead> I would be able to keep these elements in line with the rest of the columns, but both chrome and firefox render every <tbody> below the <thead>.

Example:

<table> <tbody> <tr> <td>1</td><td>1</td><td>1</td> </tr> </tbody> <thead> <tr> <th>head</th><th>head</th><th>head</th> </tr> </thead> <tbody> <tr> <td>2</td><td>2</td><td>2</td> </tr> <tr> <td>3</td><td>3</td><td>3</td> </tr> <tr> <td>4</td><td>4</td><td>4</td> </tr> </tbody> </table>

Although I understand this, I still need to find a way to have these elements stay in line with specific columns.

Answer1:

You can use multiple rows in <thead> like this:-

<table> <thead> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>head</td> <td>head</td> </tr> </thead> </table>

Answer2:

I recommend that you use an id (#) marker to identify that part that you want the js to work off and have the js use that id.

With that, have the thead first and the tbody last.

The variations you are describing may work - in the browser you using now, on the OS you are ok - and may be compliant a certain version of the HTML spec- but putting things in an unusual order is (in my expereince) just the kind of thing to not work, or work the same, everywhere and to eventually be the cause of much frustration, especially as the site grows in complexity.

Answer3:

One solution is to use another table inside one tr, in your thead. Althought, this is a totally ugly solution.

You can also place a div above your table using CSS.

Answer4:

Correct table structure is:

<table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> <tfoot> <tr> <th></th> <th></th> </tr> </tfoot> </table>

<thead> will always be on the top and <tfoot> will always be at the bottom.

<hr />

Using jQuery you can swap <thead> and <tbody> content by:

$(document).ready(function() { $('#myTrigger').click(function() { var top = $('thead').html(); var mid = $('tbody').html(); $('thead').html(mid); $('tbody').html(top); }); });

Recommend

  • OpenGL es 1.1 - android - does gl.glDeleteTextures free video memory?
  • Objective-C version of PHP mcrypt_encrypt
  • PromptDialog error occurs in Messenger bot
  • UIDatePicker crashing application
  • why can't I use reflection to take the address of a slice?
  • Get All IP and Mac Address in lan
  • Memory leak in Ionic(or angular)?
  • Get frequency distribution of a decimal range in MySQL
  • Distribute numbers to two “containers” and minimize their difference of sum
  • Eclipse (ctrl+space) content assist hook
  • maximizing profit for given stock data via DP
  • Cannot get Django 1.7 Migrations to detect proper changes to my DB.
  • How to layout? (JFrame, JPanel, etc.)
  • Get last 15 lines from a large file in SFTP with phpseclib [duplicate]
  • Get the UTM tags with Facebook Marketing API
  • Execute powershell script on a remote computer using C#
  • Questions related to Garbage Collector and finalize() method
  • Align microsoft access queries
  • Do iTunesConnect external testers get updates for *every* uploaded ipa file after Beta Approval?
  • How to modify the way a ForeignKey field is rendered in a Django admin page to avoid browser crash?
  • $this->a->b->c->d calling methods from a superclass in php
  • Auto send email based on the time and email address in database
  • dmtracedump doesn't work, HELP!
  • Scripting Support For Image Filtering in DigitalMicrograph
  • C++11: Why rvalue reference parameter implicitly converted to lvalue
  • Find all parks for a given zipcode with google maps
  • Swift manually rotate view controller
  • Rotating Towards Path in OpenGL
  • Google Spreadsheet Script to Blink a range of Cells
  • Calculate time from document
  • Change cell value based on cell color in google spreadsheet
  • how to snap two objects in runtime in unity?
  • Another “Cannot make static reference…” Question
  • Make checkout phone field optional for specific countries in WooCommerce
  • calling IO Operations from thread in ruby c extension will cause ruby to hang
  • Angular 4: Responsive Grid List
  • Write to .csv file with PHP (Commas in Data Error)
  • media foundation H264 decoder not working properly
  • How to mutate multiple variables without repeating codes?
  • ReferenceError: TextEncoder is not defined