如何获取表标记的标题标记以缩小以适应其内容而不中断流

我正在缩小标题框以适应其文本内容。我有:

以下是我想要的:

通常的float、display方法:inline/inline block/table都会导致以下变化:

其中,标题从流中分离出来,并被视为表框的子元素。

表代码没有什么特别的:

<table>
<caption>传奇小说英雄</caption>
THEAD & GT;
T>
<th>名称</th><th>电源</th><th>复仇女神</th>
& LT/TR & GT;
&THEAD & GT;
TSBOR>
T>
<td>眩目者</td><td>声光转换</td><td>天启</td>
& LT/TR & GT;
…
</tbody></table>
< /代码> 

关于如何完成我想要的事情有什么想法吗?事先谢谢。


以下是我想要的:



通常的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>


关于如何完成我想要的事情有什么想法吗?事先谢谢。