Jump to main navigation


Styling table captions with CSS: fixing the width problem

080823

Styling table captions with CSS is not always an easy task. The specific issue I'll be dealing with in this article is the fact that the width of the caption doesn't naturally fit the width of the table. First I'll introduce the problem and then present a cross browser solution.

Our desired table and caption

There's many ways to style tables, I'm going to focus on a table with collapsed borders, and a 1px border around each TH and TD. Also we want a caption that has exactly the same width as the table, which one would think should be quite straight forward to accomplish. Here's how we want our table and caption to look like:

The desired result for our table and caption

Running intro trouble

Let's add the style to our table, and see what happens:

<table summary="lorem ipsum dolor">
  <caption>Lorem ipsum</caption>

  <tr>
    <th>Lorem ipsum</th>
    <th>Bobis sum</th>
    <th>Populae sonorem</th>
    <th>Ipsum et</th>
  </tr>

  <tr>
    <td>Lorem ipsum</td>
    <td>Bobis sum</td>
    <td>Populae sonorem</td>
    <td>Ipsum et</td>
  </tr>

  <tr>
    <td>Lorem ipsum</td>
    <td>Bobis sum</td>
    <td>Populae sonorem</td>
    <td>Ipsum et</td>
  </tr>

  <tr>
    <td>Lorem ipsum</td>
    <td>Bobis sum</td>
    <td>Populae sonorem</td>
    <td>Ipsum et</td>
  </tr>

</table>
table {
  border-collapse: collapse;
}

caption, th, td {
  padding: .2em .8em;
  border: 1px solid #fff;
}

caption {
  background: #dbb768;
  font-weight: bold;
  font-size: 1.1em;
}

th {
  font-weight: bold;
  background: #f3ce7d;
}

td {
  background: #ffea97;
}

Everything seems simple enough. Note that we add the border to all TH, TD and CAPTION. And it does work in IE6, IE7, Opera... but not Firefox! Firefox's caption is 1px short on the left side, as shown in the following image:

The caption width problem in Firefox

The paradox here is that Firefox is doing the right thing according to the CSS2 specification. That's good news for Firefox fans :) but we still need to find a solution.

The fix

Let's try adding a 1px negative margin to the left of the caption... Sorted! Now the caption has the desired width in Firefox. You would think that this might cause problems in IE, but it doesn't have any effect at all.

Can it be so easy? Well, of course not! And this time Opera treats us with a fancy bug, causing the whole caption to disappear. The space is there, but the caption is gone. My way of fixing this is by canceling the negative margin with an Opera-only statement. Here's the CSS with the fix applied:

[Edit: 080828] The CSS hack used in the following code targets only Opera 9 and below, but fails in (at least) v9.52. I will research into this and post a better solution here when I find it.

table {
  border-collapse: collapse;
}

caption, th, td {
  padding: .2em .8em;
  border: 1px solid #fff;
}

caption {
  background: #dbb768;
  font-weight: bold;
  font-size: 1.1em;
  margin-left: -1px; /* Fix FF 1px issue */
}

html:first-child caption { /* Opera only */
 margin-left: 0;
}

th {
  font-weight: bold;
  background: #f3ce7d;
}

td {
  background: #ffea97;
}

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 comments to “Styling table captions with CSS: fixing the width problem”

  1. #01 By natalia, 080824 at 08:03

    You are soo clever :)

  2. #02 By carlivar, 080831 at 17:19

    You seem to have forgotten Safari. It is off by 1px in the RIGHT
    margin of the caption.

  3. #03 By dense13, 080831 at 19:48

    Thanks carlivar, will look into that. Being a Windows user (did I say that out loud?) and not having access to a Mac, I generally stick to Windows browsers. Which is a shame, and I will eventually get a Mac. Maybe I could try Safari for Windows, but if I'm not mistaken it's a bit buggy. Although I haven't checked it for a while, might be time to give it another go.

    Ok, this technique needs some TLC: now it doesn't work with Opera 9.5 nor Safari. Sigh...

  4. #04 By natalia, 080831 at 22:52

    I didn't realise because I didn't try out the code, do you have a
    live example? Next time I can send you a Safari screenshot of
    anything you are trying.

  5. #05 By Firefox’s 1 pixel indent on the caption tag | CssGalleries, 080910 at 06:51

    [...] Styling table captions with CSS: fixing the width problem
    Share and Enjoy: [...]

  6. #06 By mark, 081031 at 21:50

    hello from PL Yes the solution is ok.... if the table has any rows.
    I have a webApp thats using dinamicly generated tables. When there
    are no rows the caption goes wild :) in ff its not getting the full
    width of the table. So i added width:100% to the caption element.
    This caused next problems as You would expect:D now we get caption
    which is -1 px smaller than before. This time on the right sight.
    OMG :D all browsers suck but IE rules in this matter. peace

  7. #07 By dense13, 081101 at 09:01

    Well, it is not valid HTML to have a table without rows, so the responsibility goes to the webApp. :)

  8. #08 By satya, 121219 at 00:41

    Nice tweaking the styles for table design... good one

  9. #09 By Brad Caldwell, 140213 at 07:18

    Thanks! That was just what I needed to style the captions for my
    tables at my Spanish page.

  10. #10 By dense13, 140214 at 07:24

    @Brad Caldwell: watch out, this is very old code, probably not that great anymore for current browsers, not to mention that it doesn't work well for Safari (probably not Chrome either), which these days is quite important.

Add a comment


Allowed XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <p> <strike> <strong>


To prove you're a person (not a spam script), type the answer to the math equation shown in the picture. Click on the picture to hear an audio file of the equation.
Click to hear an audio file of the anti-spam equation =

Additional content and navigation

Categories

Main navigation menu