How to make the following corrections below in qweb pdf?

Question

I have been working on qweb pdf for tables part with the following part:

<div class="row">
    <h3><font color="blue">Action Items:</font></h3>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Action</th>
                <th>Assigned To</th>
                <!--<th class="text-center">Ref.</th>-->
                <th>Due Date</th>
                <th>Status</th>
            </tr>
            <br/>
            <br/>
        </thead>
        <tbody>
            <tr t-foreach="o.action" t-as="line">
                <td><span t-field="line.act_ion"/></td>
                <td>
                    <span t-field="line.asgnd_to"/>
                </td>
                <td>
                    <span t-field="line.due_date"/>
                </td>
                <td>
                    <span t-field="line.Status"/>
                </td>
            </tr>
        </tbody>
    </table>
</div>

and i am getting some problem like in the image like table header and table body is getting collided together in the new page

Answer 1

Create the table outside the div tag and set the following class on table: class="table table-condensed"