Table footer auto spanning across width of table

Question

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

You need to know the number of columns or create a separate table underneath. — Kermit, Sep 12 '12 at 14:31
Thanks njk....I was just wondering if there is a way that the footer (which is only one column wide in my case) can spread across the width of table...maybe using css? — Vikram, Sep 12 '12 at 14:33
You can certainly move away from using a table altogether to a CSS approach. However, if you're displaying data, table is still the way to go. — Kermit, Sep 12 '12 at 14:36
Technically (I know this seems weird!) but the tfoot tag should come just after the thead tag, and the tbody tag should come last — Sean, Sep 12 '12 at 14:46

albertedevigo · Accepted Answer · 2012-09-12T14:46:00.800

8

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!

edited Sep 12 '12 at 14:46

answered Sep 12 '12 at 14:36

albertedevigo

18,262
6
52
58

This is not supported in all browsers. In fact, last I checked (which granted was a decent while ago), only firefox supported this. – Phillip Schmidt Sep 12 '12 at 14:38
W3C says: colspan = number [CN] This attribute specifies the number of columns spanned by the current cell. The default value of this attribute is one ("1"). The value zero ("0") means that the cell spans all columns from the current column to the last column of the column group (COLGROUP) in which the cell is defined. – albertedevigo Sep 12 '12 at 14:41
I have never seen this before. Can you provide some documentation? – Kermit Sep 12 '12 at 14:43
About tfoot, W3C says: As a child of a table element, after any caption, colgroup, and thead elements and before any tbody and tr elements, but only if there are no other tfoot elements that are children of the table element. – albertedevigo Sep 12 '12 at 14:43
@simbirsk Yeah, its been in the W3C specs since day one. Still up to browsers whether or not to support it, though. I would guess all newer browsers support it, but I'd be careful with older versions – Phillip Schmidt Sep 12 '12 at 14:43
Links for the quotations: http://www.w3.org/TR/html4/struct/tables.html and http://www.w3.org/wiki/HTML/Elements/tfoot – albertedevigo Sep 12 '12 at 14:43
I'll edit, because you are right, that's not a 100% cross-browser solution. Thanks! – albertedevigo Sep 12 '12 at 14:44
@njk from [www.w3.org](http://www.w3.org/TR/WD-tables-960123) : `COLSPAN, e.g. A positive integer value that defines how may columns this cell spans. The default COLSPAN is 1. COLSPAN=0 has a special significance and implies that the cell spans all columns from the current column up to the last column of the table.` – Phillip Schmidt Sep 12 '12 at 14:45
All, here's the SO topic on [this issue](http://stackoverflow.com/questions/398734/colspan-all-columns). – Kermit Sep 12 '12 at 14:48
@simbirsk thanks! colspan = '0' worked for me. I have updated my question with solution. – Vikram Sep 12 '12 at 15:32
+1 for "`` should be between `` and ``". I was having a weird issue with bottom borders not rendering the full width of the table in Chrome. Moving `` to the conform to spec fixed the issue. – Altay_H Aug 10 '18 at 22:06

score 4 · Answer 2 · answered May 20 '15 at 00:44

4

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

answered May 20 '15 at 00:44

Robert Henderson

394
2
8

Phillip Schmidt · Answer 3 · 2012-09-12T15:05:13.197

2

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>.

edited Sep 12 '12 at 15:05

answered Sep 12 '12 at 14:35

Phillip Schmidt

8,805
3
43
67

Table footer auto spanning across width of table

3 Answers3

Linked