CODEWITHSUNDEEP
htmlcss
espresso_coffee
espresso_coffee

Reputation: 6110

How to set page break on the table with one tr if content of table cell is too big?

I have 4 different tables in my div container. I have trouble fitting my last table on the page. In my last table there is only one table cell. The height on this td cell is set to 200px. I'm wondering if I can set page-break on my last table. Here is example of my table:

<table class="srTable">
    <thead>
        <tr>
            <th>Summary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="summary"></td>
        </tr>
    </tbody>
</table>

Here is my CSS:

    table.srTable {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
}
table.srTable th {
    text-align: center;
    border: 1px solid black;
    background-color: #E0DBDD;
}
table.srTable td {
    height: 180px;
    text-align: left;
    vertical-align: top;
}

@media print {
    table.srTable { page-break-after:auto }
    table.srTable tr { page-break-inside:avoid; page-break-after:auto }
    table.srTable td { page-break-inside:avoid; page-break-after:auto }
}

If content in srTable can't fit on the page I would like to see entier table on the next page. Code above didn't work, table stayed on the first page and I couldn't see bottom border of my td cell.

Upvotes: 0

Views: 74

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

You can use a much simpler solution. You only have to set page-break-inside: avoid; on the table.srTable. The other rules for <tr> or <td> aren't needed:

table.srTable {
  margin: 5px 0;
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}
table.srTable th {
  text-align: center;
  border: 1px solid black;
  background-color: #E0DBDD;
}
table.srTable td {
  height: 180px;
  text-align: left;
  vertical-align: top;
}
div {
 height:98vh;
}
@media print {
  table.srTable {
    page-break-inside: avoid;
  }
}
<div></div>
<table class="srTable">
  <thead>
    <tr>
      <th>Summary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="summary"></td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions