Table caption element is causing page to break when printing

Question

Hi there,

Consider the following table:

<table>
<caption>The caption</caption>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>

The table renders right when displaying on screen, but when printing it breaks the table for a new page. When I delete the caption element or display:none, the table renders right on printing.

Any help?

Answer 1

According to W3C:

The table elements, table, tr, td, th, and caption, should have their standard meaning and display treatments: table, table-row, table-cell, and table-caption.

From my understanding this means

caption { display: table-caption; }

EDIT: I found a more accurate style:

TABLE         { display: table }
TR            { display: table-row }
THEAD         { display: table-header-group }
TBODY         { display: table-row-group }
TFOOT         { display: table-footer-group }
COL           { display: table-column }
COLGROUP      { display: table-column-group }
TD, TH        { display: table-cell }
CAPTION       { display: table-caption }

Please tell me if this works for you.

For more detailed information about the topic, visit THIS PAGE

Answer 2

Are there a page-break properties assigned in CSS for this element? Example, "page-break-before" or "page-break-after"?