Create an 8.5x11 or A4 Letter Size Page with Tables for Text

Question

Create an 8.5x11 or A4 Letter Size Page with Tables for Text

166 Views Asked by Off Grid At 17 September 2023 at 23:29

I would like to create an A4 or 8.5x11 page that would look like what I have attached. One page has a 3" top margin, 2 vertical lines, 1" margin left/right with line numbers on the left., and two 2" cells at the top below the 3" margin. Each page has numbers and footers.

As far as I could get HTML and the CSS:

body {
  background: rgb(204, 204, 204);
}

page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

page[size="A4"] {
  width: 21cm;
  height: 29.7cm;
}

page[size="A4"][layout="landscape"] {
  width: 29.7cm;
  height: 21cm;
}

@media print {
  body,
  page {
    background: white;
    margin: 0;
    box-shadow: 0;
  }

<body>
  <page size="A4"></page>
  <page size="A4"></page>
  <page size="A4">PAGE</page>
  <page size="A4"></page>
</body>

Original Q&A

There are 1 best solutions below

**scrhartley** · Accepted Answer · 2023-09-18T14:30:00.750000

How's this looking?

body { background: rgb(204,204,204); }
.page {
    --page-inset-side: 1in; /* left/right */
    --page-inset-ends: 1in; /* top/bottom */

    box-sizing: border-box;
    position: relative;

    background: white;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
    
    padding: var(--page-inset-ends) var(--page-inset-side);
    
    /* footer-related stuff */
    --footer-height: 2in;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.page.portraitA4 {
    --page-side-numbers: '1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25';
    --page-height: 29.7cm;
    width: 21cm;
    height: var(--page-height);
}
.page.landscapeA4 {
    --page-side-numbers: '1 2 3 4 5 6 7 8 9 10 11 12 13 14 15';
    --page-height: 21cm;
    width: 29.7cm;
    height: var(--page-height);
}

.page::before, .page::after {
    --page-vertical-line: black 0.1cm solid;

    box-sizing: border-box;
    width: var(--page-inset-side);
    position: absolute;
    top: var(--page-inset-ends);
    
    /* vertical line length */
    height: calc(
        var(--page-height)
        - (2 * var(--page-inset-ends))
        - 2.1cm /* space for footer */
    );
}

.page::before {
    content: var(--page-side-numbers);
    border-right: var(--page-vertical-line);
    left: 0;
    
    line-height: 0.9cm;
    font-weight: bold;
    
    --numbers-inset: 0.3in;
    /* leave no room for content so that we guarantee overflow and wrapping */
    padding-left: calc(var(--page-inset-side) - var(--numbers-inset));
    padding-right: var(--numbers-inset);
}

.page::after {
    content: '';
    border-left: var(--page-vertical-line);
    right: 0;
}

.pageContent {
    margin-inline: 0.4cm;
    margin-top: 2in;
}

.pageFooter {
    font-size: 9pt;
    display: grid;
    grid-template-columns: 5cm auto 6.3cm;
    margin-inline: 0.5cm;
}
.pageFooter p {
    margin: 0;
}
.pageFooter > :nth-child(2) {
    text-align: center;
}

<body>
    <div class="page portraitA4">
        <div class="pageContent">Page 1</div>
        <div class="pageFooter">
            <div>
                <p>Ut nec felis non quam dictum ultrices.</p>
                <p>Nullam gravida nulla ac est laoreet gravida.</p>
            </div>
            <div>
                3
            </div>
            <div>
                <p>Ut nec felis non quam dictum ultrices.</p>
                <p>Nullam gravida nulla ac est laoreet gravida.</p>
                <p>Vestibulum tempus tellus egestas, tempor justo
                   interdum, accumsan nisl.</p>
                <p>Sed mollis quam sed faucibus condimentum.</p>
            </div>
        </div>
    </div>
    <div class="page landscapeA4">
        <div class="pageContent">Page 2</div>
        <div class="pageFooter">
            <div>
                <p>Ut nec felis non quam dictum ultrices.</p>
                <p>Nullam gravida nulla ac est laoreet gravida.</p>
            </div>
            <div>
                3
            </div>
            <div>
                <p>Ut nec felis non quam dictum ultrices.</p>
                <p>Nullam gravida nulla ac est laoreet gravida.</p>
                <p>Vestibulum tempus tellus egestas, tempor justo
                   interdum, accumsan nisl.</p>
                <p>Sed mollis quam sed faucibus condimentum.</p>
            </div>
        </div>
    </div>
 </body>

Create an 8.5x11 or A4 Letter Size Page with Tables for Text

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-TABLE

Related Questions in CSS-TABLES

Trending Questions

Popular # Hahtags

Popular Questions