'How to print complex table layout
Im struggling to print my table when it spans over multiple pages. some of the nested rows overrun into the next page and overlaps in the footer. Because my rows are nested - one row is made up of 4 or more rows im finding table page breaks aren't working as expected because the rows aren't grouped?
If my assumption is correct is there a way I can group them into one row so they stay together on page breaks and allow for legible printing? or is there a different workaround?
the below is an example of 'one' row but you can get a better idea here https://jsfiddle.net/Elbusta/5kz02uy1/9/
<tbody class="center">
<tr>
<td class="main-content" colspan="7" rowspan="6">
<div>
<div>
<span class="blue">
Content Heading Text
</span>
<span class="corner">
ugh
</span>
</div>
<div>
<span>
ipsum
</span>
<span class="middle">
lorem
</span>
<span class="corner">
Corner Text
</span>
</div>
<div>
<span>
Text
</span>
<span class="middle">
Text
</span>
</div>
<div>
<span>
bleh
</span>
<span class="middle">
blah
</span>
</div>
</div>
</td>
<td>08:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>13:00</td>
<td class="filled"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>15:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>16:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>17:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>18:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
