How to get a TABLE tag's CAPTION tag to shrink to fit its contents without breaking flow

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

You can't make one row in the table smaller then the others. Why don't you place the caption outside the table using div with correct background-color?