Как уменьшить тег CAPTION тега TABLE, чтобы он соответствовал его содержимому, не нарушая поток

Question

Я пытаюсь сжать поле заголовка, чтобы оно соответствовало его текстовому содержимому. Вот что у меня есть:

Вот что я ищу:

Обычные методы float, display: inline / inline-block / table все вызывают варианты следующего:

, в котором заголовок вырывается из потока и становится дочерним элементом поля таблицы.

В коде таблицы нет ничего особенного:

<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>

Есть идеи, как добиться того, чего я хочу? Заранее спасибо.

Answer 1

Элементы таблицы, такие как <caption> и <legend>, как известно, трудно поддаются стилизации. Одним из распространенных обходных путей является добавление внутреннего <span> и стиль, который вместо этого. Я собрал для вас быстрый макет: http://jsfiddle.net/sjvLa/

Если вы не возражаете против дополнительной разметки, это может быть то, что вам подходит.

Answer 2

Вы не можете сделать одну строку в таблице меньше, чем другие. Почему бы вам не разместить заголовок вне таблицы, используя div с правильным фоновым цветом?