Question

I’m trying to shrink the caption box to fit its text content. Here’s what I have:

Here’s what I’m after:

The usual methods of float, display:inline/inline-block/table all cause variants of the following:

in which the caption is broken out of the flow and becomes treated as a child element of the table’s box.

The table code is nothing special:

<table>
<caption>Legendary fictional heroes</caption>
<thead>
    <tr>
        <th>Name</th><th>Power</th><th>Nemesis</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Dazzler</td><td>Sound-to-Light Transformation</td><td>Apocalypse</td>
    </tr>
    ...
</tbody>  </table>

Any ideas on how to accomplish what I want? Thanks in advance.

Answer 1

Table elements like <caption> and <legend> are notoriously difficult to style. One of the common workarounds is to add an inner <span> and style that instead. I’ve put together a quick mock-up for you here: http://jsfiddle.net/sjvLa/

If you don’t mind the additional markup, this could be something that works for you.