如何模拟多个表字幕？ [英] How do I simulate multiple table captions?

问题描述

不幸的是，就我可以告诉， display：table-caption 将一切都合并成一个空间在顶部。这意味着只有标题字幕实际显示。

我试图将它们视为行，但由于某种原因，它们的宽度绑定到第一个表列的宽度。如果我使他们的常规 div s的宽度设置为 100％。

有另一种也许更优雅的方法来拥有多个表格字幕？

解决方案

因为你使用CSS布局（这个不是表格数据），那么没有理由使用 display：table-caption 作为页脚。只需创建一个常规div，其宽度设置为与表格相同（或填充一个收缩包装表格的容器）。

编辑：以下是更新的示例： http://jsfiddle.net/fCTpR/1/

I'm trying to make a CSS table that (for layout purposes) has a caption at the top and bottom.

Unfortunately, as far as I can tell, display: table-caption merges everything into a single space at the top. This means that only the "header" caption is actually displayed.

I've tried treating them as rows instead, but for some reason, their widths bind to that of the first table column. (Am I doing something wrong here?) The same happens if I make them regular divs with their widths set to 100%.

Is there another, perhaps more elegant way to have multiple table captions? Have I made some stupid error in my attempts that's screwing up the layout?

解决方案

Since you're using CSS for layout (this is not tabular data) then there's no reason to use display:table-caption for the footer. Just make a regular div whose width is set to the same as the table (or fills a container that shrink-wraps the table).

Edit: Here's an updated example: http://jsfiddle.net/fCTpR/1/

这篇关于如何模拟多个表字幕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！