HTML 表格标题作为标题行的一部分

Question

我想创建一个表格标题行，其中包括左侧的标题以及右侧的“示例标题”。为了可访问性和语义正确，标题可能应该在 <caption> 中。标签，但“示例标题”不是标题的一部分，因此它可能不应该在 <caption> 内.标题不能在行内，因为它必须是 <table> 之后的第一个元素。 .

这是 HTML 结构:

<table>
    <caption>Caption</caption>
    <thead>
        <tr class="sample">
            <th colspan="2">Sample header</th>
        </tr>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data1</td>
            <td>Data2</td>
        </tr>
    </tbody>
</table>

标题在表格上方作为单独的一行结束，而我希望它与“示例标题”位于同一行。

这是我正在尝试实现的示例:http://jsfiddle.net/vueLL5ce/5/ .它将“caption”的位置设置为 relative 并手动将其移动到我想要的位置。这种方法的两个主要问题是，重新定位标题仍然会在表格上方保留其原始空间，并且我正在处理因浏览器而异的像素，因此它不一定正确排列。

有什么好的方法可以做到这一点吗？我坚持在 <caption> 中包含 header 信息吗？ (和样式看起来像表格行)或创建常规表格行而不使用 <caption> ？

Answer 1

将背景颜色从 div 移到表格，它应该会为您移除顶部的颜色。见附件 fiddle here

table {
border: solid 1px Black;
width: 100%;
background-color: #FFFFDD;

我会删除标题，使用列标题并将两个元素与自己的类分开，然后在您的 CSS 中对齐它们。更新了示例 here这样您就完全没有间距问题。