如何模拟多个表格标题？
我正在尝试制作一个 CSS 表格（出于布局目的），其顶部和底部都有标题。
不幸的是，据我所知，display: table-caption将所有内容合并到顶部有一个空格。这意味着实际上只显示“标题”标题。
我尝试将它们视为行，但由于某种原因，它们的宽度绑定到第一个表的宽度柱子。 （我在这里做错了什么吗？）如果我将它们设置为常规 div 并将其宽度设置为 100%，也会发生同样的情况。
是否有另一种可能更优雅的方式来拥有多个表格标题？我在尝试中是否犯了一些愚蠢的错误，导致布局混乱？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
由于您使用 CSS 进行布局（这不是表格数据），因此没有理由对页脚使用
display:table-caption。只需制作一个常规 div，其宽度设置为与表格相同（或填充收缩包装表格的容器）。编辑：这是一个更新的示例：http://jsfiddle.net/fCTpR/1/
Since you're using CSS for layout (this is not tabular data) then there's no reason to use
display:table-captionfor 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/