Question

Here’s my problem: I have an HTML table that looks like this:

What I want is for there to be an additional table row underneath it, except this row spans the full width of the table – but with just one cell. I quickly mocked up an example:

As you can see I added another Table Row below it with a single <td> cell inside containing the text. However I want this cell to span 100% of the width of the entire table – it shouldn’t resize the width of the ‘Name’ column.

Is such a thing possible? I am happy to use jQuery or Javascript if needs be – also, this doesn’t need to work in IE as every user is using Chrome (although that would be a perk).

Answer 1

In your case, you’d do something like

<tr>
  <td colspan="5">This text should be as long as the entire table's width...</td>
</tr>

The colspan attribute says how many columns the cell should take up. It should work in all browsers that support tables, as it’s standard HTML.

In JavaScript, you’d set the colSpan property of the cell, or call .setAttribute("colspan", the_number_of_columns) on it. Either should work. But unless you’re generating the cell dynamically, you should just include the colspan attribute in your HTML.