How to contain the header within table width when the fields are dynamic

Question

I have a table with few rows and recurring header. The number of columns is not fixed and can vary. The header is a single cell spanning across the whole table. When a column is taken away from the table the header width is not recalculated and exceeds the width of the table. How can I contain the header inside the table with as little code as possible. If possible I would prefer to not use JS. The problem can be seen here

I have recreated the problem here in JSFiddle.

<table>
    <colgroup>
        <col style="width:10px">
        <col style="width:20px">
        <col style="width:30px">
    </colgroup>
    <tr>
        <th colspan=100>
            numbers
    <tr>
        <td>1<td>2<td class="hide">3</td>
    <tr>
        <td>1<td>2<td class="hide">3</td>
    <tr>
        <th colspan=100>
            numbers
    <tr>
        <td>4<td>5<td class="hide">6</td>
</table>

td{
    border: 1px solid grey;
}
table {

    border: 1px solid black;
    border-collapse:collapse;
    table-layout: fixed;
}

els = document.getElementsByClassName("hide")
for(var i=0;i<els.length;i++)
    els[i].style.display = "none";

Edited

I am not using JQuery(I used it for shorter example). The columns are concealed with JS(on click a column disappears). The example there is as close to my problem as it gets. The headers are repeated every ~100 rows (in fact there is <tr><th>Index:</th><th>Item:</th></tr>.

I am not sure it is possible without either using JavaScript, or a maybe fixed width. — PhistucK, May 06 '14 at 16:14
You could use the table caption maybe? This way you could circumvent the issue of having a variable number of columns. — JohanVdR, May 06 '14 at 16:21
@JohanVdR "*recurring header*" Can the caption be recurring? Besides the caption does not suit my needs for other reasons I tried it. — Dharman, May 06 '14 at 16:24
Thank you for the edit of your question. Will the the columns be changed with javascript at runtime or will they be static? — Nico O, May 07 '14 at 10:37
you schould read here: http://stackoverflow.com/questions/398734/colspan-all-columns i recommend to make a `..` to identify the desired elements, since you should not have more than one `` either way it seems, that you will have to set the correct `colspan` on load with JS or go for some quirky `colspan="100"` like thing. — Nico O, May 07 '14 at 10:49
@Nico O The columns are changed at runtime on the client side — Dharman, May 07 '14 at 14:15

score 2 · Answer 1 · answered May 06 '14 at 16:28

2

http://jsfiddle.net/arhws/6/

<table>
    <caption>
    Numbers
    </caption>
    [...]

answered May 06 '14 at 16:28

JohanVdR

2,880
1
15
16

I can't use the caption more than once, can I? – Dharman May 06 '14 at 16:29
@Dharman I upvoted the answer of John. Your question is confusing and your demo is not showing your actual problem. It's just a table with an unclosed colgroup. Make a demo to show what your markup looks like and what your problem is. Also you left unclear if your DOM will be manipulated with JS or you just need the table headline to be "rendered" on page load only. – Nico O May 06 '14 at 16:35
Only as the first child of the table. It is a caption for the whole table. See http://www.w3.org/TR/html5/tabular-data.html#the-caption-element – JohanVdR May 06 '14 at 16:35
@Nico O It is confusing whether he wanted to only illustrate the problem by hiding a cell with javascript. – JohanVdR May 06 '14 at 16:38
but the questions remain. I'd also just would like to see what @Dharman means by recurring header. Will this be applied with JS or will it be in the document all the time? A demo with Plain HTML, and an image plus clear description of the usecase would make much more sense imo. – Nico O May 06 '14 at 16:42

score 0 · Answer 2 · answered May 06 '14 at 16:24

0

Try resetting the colspan based on the visible cells:

$(".hide").hide();
var rowlength = $( "tr:nth-child(2) td" ).length;
var hidelength  = $( "tr:nth-child(2) td.hide" ).length;
$("th").attr("colspan",rowlength-hidelength);

answered May 06 '14 at 16:24

JP.

257
1
3
8

I don't use JQuery. I'm trying to minimize the use of JS on my page – Dharman May 06 '14 at 16:27
$(".hide").hide(); is jquery – Chang May 06 '14 at 16:33

score 0 · Accepted Answer · answered May 08 '14 at 14:11

For anyone interested in how I did it in the end:

http://jsfiddle.net/7sXv4/14/

I have added the same class "hide" to the col so that when the column is hidden the col tag is not displayed anymore.
I made the colspan on tr the exact maximum number of columns.
I have added a width to the table of the first column (minimal width possible)

BTW I know the fiddle does not work in Chrome but for some reason in my application it works both in Chrome and FF.

How to contain the header within table width when the fields are dynamic

Edited

3 Answers3