Html 获取标题元素与表元素内联
我构建了一个利用caption元素的表;表格周围有方框阴影,默认情况下,标题位于表格顶部,方框阴影之外。我试图让标题落在阴影框内。我将标题的显示改为Html 获取标题元素与表元素内联,html,html-table,caption,Html,Html Table,Caption,我构建了一个利用caption元素的表;表格周围有方框阴影,默认情况下,标题位于表格顶部,方框阴影之外。我试图让标题落在阴影框内。我将标题的显示改为display:table header group,它确实将标题放在了表格中,但是这“破坏了”了我想要的布局……你可以在这里看到:(我只在chrome中查看了这一点)第一列比其他列占据了更多的宽度。有人知道一种解决方案,它可以将标题放在表中,同时不改变列宽 CSS: HTML: 我只是遇到了同样的问题,开始问这个问题。如果您确定您的标题只有一行(即
display:table header group
,它确实将标题放在了表格中,但是这“破坏了”了我想要的布局……你可以在这里看到:(我只在chrome中查看了这一点)第一列比其他列占据了更多的宽度。有人知道一种解决方案,它可以将标题放在表中,同时不改变列宽
CSS:
HTML:
我只是遇到了同样的问题,开始问这个问题。如果您确定您的标题只有一行(即您知道它的高度),您可以尝试将其设置为
位置:绝对
,并将表
设置为位置:相对
,顶部填充与标题
的高度相等
table {
position: relative;
padding-top: 20px;
}
caption {
position: absolute;
top: 0;
left: 0;
height: 20px;
line-height: 20px;
}
<h1>Caption Default <code>display:table-caption</code></h1>
<table summary="Summary of Table Data">
<caption>Caption for Table</caption>
<thead><tr><th>Sun</th><th>Mon</th><th>Tues</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead>
<tfoot><tr><td colspan="7"><p>Table Footer</p></td></tr></tfoot>
<tbody>
<tr><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>
</tbody>
</table>
<hr />
<h1>Caption set to <code>display:</code></h1>
<table summary="Summary of Table Data">
<caption class="captionx">Caption for Table</caption>
<thead><tr><th>Sun</th><th>Mon</th><th>Tues</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead>
<tfoot><tr><td colspan="7"><p>Table Footer</p></td></tr></tfoot>
<tbody>
<tr><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>
</tbody>
</table>
table {
position: relative;
padding-top: 20px;
}
caption {
position: absolute;
top: 0;
left: 0;
height: 20px;
line-height: 20px;
}