与表格关联的 HTML header

Question

我有一个表，其中的条目数量不确定；在可打印的 PDF 页面上，我希望当该表格不再适合一页时跳到下一页，而不是从中间切开，这样效果很好。但是，我有一个表名称/描述，其中包含有关我想要与该表关联的表的信息，并且每当表跳转到下一页时，它都会随之跳转。关于如何实现这一目标有什么想法吗？ 抱歉，如果这看起来微不足道，我不是 CSS/HTML 专家，我们将不胜感激任何帮助。

这就是我所拥有的:我知道表中应该有一个正文，但由于某种原因，它与我正在使用的工具不太匹配

CSS:

.table_position
{
        table-layout:fixed;
        margin-top:15px;
        margin-bottom:15px;
        float:left;
        vertical-align:top; 
        position:relative;
        width:100%;
        page-break-inside:avoid !important;
}

HTML:

<div class="table_position">
        <span style="margin-left: 2%; color:rgb(245,132,31);">sample description</span>
        <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin-left:2%; width:93%;" svmx-data="{{$sample_data}}" width="100%">
            <thead>
                <tr>
                    <th class="theader" svmx-data="{{$sample_date}}" width="35%">
                        <span>date</span></th>
                    <th class="theader" svmx-data="{{$sample_type}}" width="40%">
                        <span>type</span></th>
                    <th class="theader" svmx-data="{{$sample_quan}}" width="25%">
                        <span>quantity</span></th>
                </tr>
            </thead>
        </table>
    </div>

jsFiddle http://jsfiddle.net/0wdr69cz/

Answer 1

答案相当简单:使用 HTML 表格标签 <caption>

这正是我想要的。