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>

这正是我想要的。

Answer 2

您是否尝试将表格描述标题放在thead的第一行，并且在一个colspan为3的th内？

我想这会起作用，然后应用一个类来单独设置它。您甚至可以从该行中删除边框，使其看起来像是在表格之外

与表关联的HTML标头

2 个答案: