Table caption collapses when the only row is set display='none'

Legacy Dynamo
1

I have a table with one Š and one row.
The caption tag is styled ‘text-align: left’ and the caption body are
text and an image.
The row has one cell that contains a table of thumbnail images.
An ‘onclick’ on the image within the caption body sets the row’s
style.display=‘none’. When that happens the caption body text & image
collapse into one column, one word per line.

I can’t see the exact code because the Firefox & Safari inspectors,
and View Source show what is originally downloaded and this is
created by Ajax.

If I don’t use a caption tag but a first row and single cell for the
‘caption’ text & image it leaves the ‘caption’ text intact.

Is this a browser bug?

David

–
David Ledger - Freelance Unix Sysadmin in the UK.
HP-UX specialist of hpUG technical user group (www.hpug.org.uk)
email@hidden
www.ivdcs.co.uk

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Tables tend to collapse to fit their content, unless you tell them
explicitly otherwise with a CSS width or height style declaration.
When you remove that content, the rest of the table shrink-wraps
around what’s left. As you’ve seen, a paragraph of text has a natural
width of 100% of its parent container. When that container loses its
grip on width, a paragraph will shrink to the width of its longest
word, or other non-breakable inline content element.

If you want to hide content but not remove it, you can try toggling
visibility rather than display. But that will just leave a content-
sized hole in your page, rather than what I suspect you want.

If you want a quick pragmatic fix for this layout, just insert a
second image 1px tall by whatever width, after your caption. This will
shim the table and keep if from collapsing. This is, by the way, what
Freeway has been up to since 1997 with those little _clear.gif images
it sprinkles into each and every table.

Walter

On Mar 4, 2011, at 8:54 AM, David Ledger wrote:

I have a table with one Š and one row.
The caption tag is styled ‘text-align: left’ and the caption body
are text and an image.
The row has one cell that contains a table of thumbnail images.
An ‘onclick’ on the image within the caption body sets the row’s
style.display=‘none’. When that happens the caption body text &
image collapse into one column, one word per line.

I can’t see the exact code because the Firefox & Safari inspectors,
and View Source show what is originally downloaded and this is
created by Ajax.

If I don’t use a caption tag but a first row and single cell for the
‘caption’ text & image it leaves the ‘caption’ text intact.

Is this a browser bug?

David

–
David Ledger - Freelance Unix Sysadmin in the UK.
HP-UX specialist of hpUG technical user group (www.hpug.org.uk)
email@hidden
www.ivdcs.co.uk

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

On Mar 4, 2011, at 8:54 AM, David Ledger wrote:

I have a table with one S and one row.
The caption tag is styled ‘text-align: left’ and the caption body
are text and an image.
The row has one cell that contains a table of thumbnail images.
An ‘onclick’ on the image within the caption body sets the row’s
style.display=‘none’. When that happens the caption body text &
image collapse into one column, one word per line.

I can’t see the exact code because the Firefox & Safari
inspectors, and View Source show what is originally downloaded and
this is created by Ajax.

If I don’t use a caption tag but a first row and single cell for
the ‘caption’ text & image it leaves the ‘caption’ text intact.

Is this a browser bug?

David
At 09:08 -0500 4/3/11, Walter Lee Davis wrote:
Tables tend to collapse to fit their content, unless you tell them
explicitly otherwise with a CSS width or height style declaration.
When you remove that content, the rest of the table shrink-wraps
around what’s left. As you’ve seen, a paragraph of text has a
natural width of 100% of its parent container. When that container
loses its grip on width, a paragraph will shrink to the width of its
longest word, or other non-breakable inline content element.

If you want to hide content but not remove it, you can try toggling
visibility rather than display. But that will just leave a
content-sized hole in your page, rather than what I suspect you want.

If you want a quick pragmatic fix for this layout, just insert a
second image 1px tall by whatever width, after your caption. This
will shim the table and keep if from collapsing. This is, by the
way, what Freeway has been up to since 1997 with those little
_clear.gif images it sprinkles into each and every table.

Walter

? ? That would mean that a table containing but text in cells would
collapse to cells one word wide.

I guess what I’m saying is that with (attempting to get code in via email):

 <table><caption style="text-align:left">Caption Text</caption><tr

id=“vanishingRow”>stuff

when that row is set display:none you get

Caption
Text

whereas with

 <table><tr><td>Caption Text</td></tr><tr

id=“vanishingRow”>stuff

when that row is set display:none you get

Caption Text

Is a caption tag meant to behave this way? It does in Safari and Firefox.

David

–
David Ledger - Freelance Unix Sysadmin in the UK.
HP-UX specialist of hpUG technical user group (www.hpug.org.uk)
email@hidden
www.ivdcs.co.uk

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

That would mean that a table containing but text in cells would
collapse to cells one word wide.

What about defining a default width (or min. width) for those rows?
Just a suggestion, I could be misunderstanding what it is you need.

Todd

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Sorry, I missed the whole caption tag thing, because I wasn’t paying
attention. I’ve never used the caption tag in a table before, so I
didn’t realize its structure or meaning. Apparently, in WebKit, the
caption tag doesn’t reserve or preserve any space for itself. It even
goes more wishy-washy than a span, because at least in a floated div,
a span will reserve as much space as its content. This seems to be a
browser interpretation of an ambiguous tag sort of thing.

Here’s a test page I made while looking at this. You should compare in
different browsers:

http://scripty.walterdavisstudio.com/caption.html

The top set of blue boxes are a table, the red boxes below that are a
div. I’ve used a wildcard CSS to give every element within each a blue
or red border, just so you can see what’s where. When you click on
either box, the single P tag inside will toggle its display property
between browser-default and none.

Walter

On Mar 4, 2011, at 8:54 AM, David Ledger wrote:

I have a table with one Š and one row.
The caption tag is styled ‘text-align: left’ and the caption body
are text and an image.
The row has one cell that contains a table of thumbnail images.
An ‘onclick’ on the image within the caption body sets the row’s
style.display=‘none’. When that happens the caption body text &
image collapse into one column, one word per line.

I can’t see the exact code because the Firefox & Safari inspectors,
and View Source show what is originally downloaded and this is
created by Ajax.

If I don’t use a caption tag but a first row and single cell for the
‘caption’ text & image it leaves the ‘caption’ text intact.

Is this a browser bug?

David

–
David Ledger - Freelance Unix Sysadmin in the UK.
HP-UX specialist of hpUG technical user group (www.hpug.org.uk)
email@hidden
www.ivdcs.co.uk

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Thanks Walter.

It looks like either the caption tag has this odd property that isn’t
well documented, or Safari and Firefox both get it wrong. One of
those HTML mysteries.

Š and thanks Todd. I had a solution, it’s just that the caption tag
is for captions - but they don’t work right.

David

At 11:40 -0500 5/3/11, Walter Lee Davis wrote:

Sorry, I missed the whole caption tag thing, because I wasn’t paying
attention. I’ve never used the caption tag in a table before, so I
didn’t realize its structure or meaning. Apparently, in WebKit, the
caption tag doesn’t reserve or preserve any space for itself. It
even goes more wishy-washy than a span, because at least in a
floated div, a span will reserve as much space as its content. This
seems to be a browser interpretation of an ambiguous tag sort of
thing.

Here’s a test page I made while looking at this. You should compare
in different browsers:

Caption Rendering

The top set of blue boxes are a table, the red boxes below that are
a div. I’ve used a wildcard CSS to give every element within each a
blue or red border, just so you can see what’s where. When you
click on either box, the single P tag inside will toggle its
display property between browser-default and none.

Walter

On Mar 4, 2011, at 8:54 AM, David Ledger wrote:

I have a table with one S and one row.
The caption tag is styled ‘text-align: left’ and the caption body
are text and an image.
The row has one cell that contains a table of thumbnail images.
An ‘onclick’ on the image within the caption body sets the row’s
style.display=‘none’. When that happens the caption body text &
image collapse into one column, one word per line.

I can’t see the exact code because the Firefox & Safari
inspectors, and View Source show what is originally downloaded and
this is created by Ajax.

If I don’t use a caption tag but a first row and single cell for
the ‘caption’ text & image it leaves the ‘caption’ text intact.

Is this a browser bug?

David

–
David Ledger - Freelance Unix Sysadmin in the UK.
HP-UX specialist of hpUG technical user group (www.hpug.org.uk)
email@hidden
www.ivdcs.co.uk

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options