Question

CSS属性caption-side允许您将<caption>元素与表格的顶部或底部对齐： https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side

如何设置标题显示在顶部和底部？这可能对较大的表有用。

理想情况下，我希望避免在表格上方添加<p>标记或类似内容，并有效地复制字幕标记。

Answer 1

仅使用HTML和CSS无法复制标题内容，这是不可能的。

根据您的使用情况，您希望标题（along with the table header和/或页脚）在滚动时保持可见，标题显示在表格底部，足以让标题从标题中消失顶部，或标题总是出现两次。前两个需要JavaScript（特别是在前者的情况下，一些非常繁重的DOM和布局操作），第三个只能通过复制标题内容（如果您不想污染标记，使用JavaScript）和将副本放在表外，因为Firefox由于错误而无法为每个表呈现多个表标题。

Answer 2

table:after {
   content: attr(title);
   background-color: #333;
   color: #fff;
}

table:before {
   content: attr(title);
   background-color: #333;
   color: #fff;
}

<table title="O caption, my caption!">
  <tr>
   <td><a href="https://css-tricks.com/css-content/">CSS Tricks</a></td>
   <td>some text</td>
 </tr>
</table>

不完全是你要求的，因为现在没有<caption>元素。但是标题文本只在代码中出现一次。

Answer 3

添加HTML文件：

<p id="lblCaption">YOUR CAPTION HERE</p>

添加CSS文件：

#lblCaption { position: fixed; }

是否有可能在HTML＆amp;仅使用CSS将表格标题与表格的顶部和底部对齐？

3 个答案: