Компоновка печатного носителя css с заголовком и двумя колонками, расположенными сверху вниз

Можно ли разместить заголовок на всех страницах для печати

возможно ли иметь основное тело с двумя столбцами, которые текут из первого столбца, затем ко второму столбцу, а затем к следующей странице и с границей в середине столбцов

макет демонстрируется https://www.scribd.com/document/391754619/Example

до сих пор, что у меня есть, но я не пошел далеко

<style>
    body {
        font-family: cursive;
        font-size: 16px;
        margin: 0;
        padding: 10px;
    }

    p,
    h4 {
        padding: 0;
        margin: 2px 0 2px 0;
    }

    .headings {
        text-align: center;
        position: fixed;
        top: 10px;
        left: 10px;
        right: 0;
    }

    .headings>h4 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .headingsTable {
        width: 100%;
        text-align: left;
    }

    .patiItem {
        margin-top: 90px;
    }

    .patiItem {
        display: inline-grid;
        width: calc(50% - 5px);
        vertical-align: top;
    }

    @page {
        size: A4;
    }

    @media print {
        .headings {
            position: fixed;
            top: 10px;
        }
        h4,
        p {
            page-break-inside: avoid;
        }
    }
</style>


<body>
<div class="headings">
    <h4>Progress notes</h4>
    <table class="headingsTable">
        <tbody>
            <tr>
                <td><b>Name</b> - Chiyembekezo Lakudzala</td>
                <td><b>Nuero number</b> - 123</td>
                <td><b>Hospital</b> number 12345</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="notes">
    <div class="patiItem">
        <div class="patiItemFixed">
            <p>Seen by Lorem ipsum</p>
            <p>Day 034 Lorem ipsum</p>
            <p>Night duty report</p>
            <p>Date: 23/October/2018</p>
            <p>08:16 am</p>
        </div>
        <div class="side">
            <h4>Issues:</h4>
            <pre>Sed pharetra lorem vel sem varius, id iaculis urna fermentum. Maecenas luctus ut tellus fringilla facilisis. Suspendisse augue ipsum, faucibus at orci rutrum, volutpat malesuada ipsum.</pre>
            <h4>Examination:</h4>
            <pre>Donec mattis nulla id sapien accumsan pulvinar. Duis quis mauris elementum mauris porttitor hendrerit vel in augue. Nam a felis non justo luctus fermentum scelerisque vel eros</pre>
            <h4>Impression:</h4>
            <pre>Quisque sodales interdum nulla eget auctor. Mauris pretium fermentum ex ut ultrices. Vivamus placerat laoreet odio sit amet vehicula</pre>
            <h4>Plan:</h4>
            <pre>Phasellus sagittis felis quam. Donec hendrerit auctor ipsum nec placerat. Praesent hendrerit tristique est eget porttitor.</pre>
        </div>
    </div>
    <div class="patiItem">
        <div class="patiItemFixed">
            <p>Seen by Lorem ipsum</p>
            <p>Day 034 Lorem ipsum</p>
            <p>Night duty report</p>
            <p>Date: 23/October/2018</p>
            <p>08:16 am</p>
        </div>
        <div class="side">
            <h4>Issues:</h4>
            <pre>Sed pharetra lorem vel sem varius, id iaculis urna fermentum. Maecenas luctus ut tellus fringilla facilisis. Suspendisse augue ipsum, faucibus at orci rutrum, volutpat malesuada ipsum.</pre>
            <h4>Examination:</h4>
            <pre>Donec mattis nulla id sapien accumsan pulvinar. Duis quis mauris elementum mauris porttitor hendrerit vel in augue. Nam a felis non justo luctus fermentum scelerisque vel eros</pre>
            <h4>Impression:</h4>
            <pre>Quisque sodales interdum nulla eget auctor. Mauris pretium fermentum ex ut ultrices. Vivamus placerat laoreet odio sit amet vehicula</pre>
            <h4>Plan:</h4>
            <pre>Phasellus sagittis felis quam. Donec hendrerit auctor ipsum nec placerat. Praesent hendrerit tristique est eget porttitor.</pre>
        </div>
    </div>
    <div class="patiItem">
        <div class="patiItemFixed">
            <p>Seen by Lorem ipsum</p>
            <p>Day 034 Lorem ipsum</p>
            <p>Night duty report</p>
            <p>Date: 23/October/2018</p>
            <p>08:16 am</p>
        </div>
        <div class="side">
            <h4>Issues:</h4>
            <pre>Sed pharetra lorem vel sem varius, id iaculis urna fermentum. Maecenas luctus ut tellus fringilla facilisis. Suspendisse augue ipsum, faucibus at orci rutrum, volutpat malesuada ipsum.</pre>
            <h4>Examination:</h4>
            <pre>Donec mattis nulla id sapien accumsan pulvinar. Duis quis mauris elementum mauris porttitor hendrerit vel in augue. Nam a felis non justo luctus fermentum scelerisque vel eros</pre>
            <h4>Impression:</h4>
            <pre>Quisque sodales interdum nulla eget auctor. Mauris pretium fermentum ex ut ultrices. Vivamus placerat laoreet odio sit amet vehicula</pre>
            <h4>Plan:</h4>
            <pre>Phasellus sagittis felis quam. Donec hendrerit auctor ipsum nec placerat. Praesent hendrerit tristique est eget porttitor.</pre>
        </div>
    </div>
</div>

Источник

0 ответов

Другие вопросы по тегам