CODEWITHSUNDEEP
htmlcsshtml-table
GeekPeek
GeekPeek

Reputation: 1767

HTML header associated with table

I have a table with an uncertain amount of entries; on printable PDF pages I want that this table jumps to the next page when it doesn't fit on one page anymore, rather than cutting through the middle and this works well. However, i have a table name/description that says something about the table that I want to associate with the table and that jumps along with it, whenever the table jumps to the next page. Any idea on how to accomplish this? Sorry if this seems trivial I'm not a CSS/HTML Guru any help will be greatly appreciated.

Here's what I have: I know there should be a body in the table but for some reason that doesn't go well with the tool I'm using

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/

Upvotes: 2

Views: 127

Answers (2)

GeekPeek
GeekPeek

Reputation: 1767

The answer is rather simple: to use the HTML table tag <caption>

This does exactly what I wanted.

Upvotes: 2

Zorgatone
Zorgatone

Reputation: 4283

Have you tried to put the table description header in the very first row of your thead, and within a th with a colspan of 3?

I guess that'll work, then apply a class to style it separately. You can even remove the borders from that row and make it look like it's out of the table

Upvotes: 0

Related Questions