Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<style>
@page { size: 5in 3in; margin: 0.5in; }
body { margin: 0; }
.table {
inline-size: 3in;
box-sizing: border-box;
border: 0.25in solid black;
padding: 0.125in 0.25in;
box-decoration-break: clone;
}
.thead {
block-size: 0.25in;
background: blue;
}
.tbody {
border: 0 solid orange;
margin-block: 0.125in;
background: gold;
}
.tfoot {
block-size: 0.25in;
background: purple;
}
</style>
<div class="table">
<!-- Page 1 -->
<div class="thead" style="margin-block-start: 0.125in;"></div>
<div class="tbody" style="border-block-start-width: 0.25in; block-size: 0.125in;"></div>
<div class="tfoot"></div>
<!-- Page 2 -->
<div class="thead"></div>
<div class="tbody" style="block-size: 0.5in;"></div>
<div class="tfoot"></div>
<!-- Page 3 -->
<div class="thead"></div>
<div class="tbody" style="border-block-end-width: 0.25in; block-size: 0.125in;"></div>
<div class="tfoot" style="margin-block-end: 0.125in;"></div>
</div>