CODEWITHSUNDEEP
htmlcsshtml-table
Vikram
Vikram

Reputation: 4190

Table footer auto spanning across width of table

I have a table which has dynamic number of columns depending on data I receive. I have a tag which needs to spread across all columns independent of number of columns in a table.

<table>
<thead>
<tr>
<th><span>ColA</span></th>
<th><span>ColB</span></th>
<th rowspan='2'><span>Col<br/>  C</span></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>Footer content here</td>
</tr>
</tfoot>
</table>

EDIT colspan = 0 worked for me!

<td colspan='0'>Footer content here</td>

Works on FF, Did not work for Chrome, IE8 though :(

EDIT 2

colspan = '100%' This link solved crossbrowser problem https://stackoverflow.com/a/5028091/405117

Upvotes: 10

Views: 27939

Answers (3)

Robert Henderson
Robert Henderson

Reputation: 403

Put a ridiculously high number in the colspan value (i.e. colspan="9999") and add the style table-layout: auto to your table element.

Upvotes: 4

Phillip Schmidt
Phillip Schmidt

Reputation: 8818

Use colspan. You'll need to get the number of columns via jQuery, and then set the colspan of the table row you want to stretch, like this:

function ColumnCount(){
    var numCols = $("#YourTableID").find('tr')[0].cells.length;
    $('tfoot tr').attr('colspan', numCols.toString());
}

And then you'll need to give the id YourTableID to the table, like this:

<table id="YourTableID">

in place of <table>.

Upvotes: 2

albertedevigo
albertedevigo

Reputation: 18411

Use colspan="0"
By the way, your <tfoot> should be between <thead> and <tbody> tags.

EDIT: That practice, being recommended by W3C, is not cross-browser. Use carefully!

Upvotes: 8

Related Questions