Question 189474 in Html Question posted in
Some basic documentation can be found here.

How to print text above a html table on every page?

When writing lines above a table in HTML the table is displayed ok on the first page but when putting this text on the next page it appears on top of the table, and the text is overlapping. This happens for all the other pages except the first one. I tried it with @media print but it’s not working. The table is very long so it automatically gets displayed on the next pages, so when I try @media print it only makes the text appear on top of the table.
Also, I want the footer to be at the bottom of the page always even when the table is not full, but if I write postion: fixed; it makes the footer overlap with the last table row, and if I don’t put postion: fixed; at all, if the table is not full the footer is displayed below the last row, in the middle of the page.

Here is the code:

@media print {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .table-container {
    margin-top: 130px;
  }
}

.page {
  margin: 10px;
  padding: 20px;
  border: 1px solid #fff;
  background-color: #fff;
  page-break-after: always;
}

.container {
  padding: 5px;
}

.info {
  margin-bottom: -10px;
  font-size: 11px;
  line-height: 1.2em;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.date {
  float: right;
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 13.8px;
}

.text {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: bold;
}

.title {
  font-weight: bold;
  font-size: 15px;
  margin-top: -11px;
  margin-bottom: 8px;
}

.description {
  font-size: 12.8px;
}

.title,
.description {
  line-height: 0.4;
}

table {
  margin-top: 11px;
  width: 100%;
  height: 40%;
  border-collapse: collapse;
  background-color: #ffffff;
}

th {
  padding: 1px;
  text-align: left;
  background-color: #ffffff;
  line-height: 1.2em;
}

tr:first-child {
  border-top: 0.1px solid #000000;
  height: 5px;
}

body {
  line-height: 1.4;
}

h4 {
  font-size: 15px;
  margin-bottom: 10px;
}

table,
th,
td {
  font-size: 12px;
  border: 1px solid black;
}

table,
.page-footer {
  line-height: 1.4;
}

tr:nth-child(26n) {
  page-break-after: always;
}

.page-footer {
  position: fixed;
  bottom: 0px;
  width: 97.3%;
  padding: 3px 1px;
  background-color: #ffffff;
  border-top: 1px solid #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.page-footer>div {
  display: inline-block;
}
<div class="header">
  <div class="info">
    <p>Text1 here<br> Text2 here<br> Text3 here</p>
  </div>
  <div class="date">
    <p>8.6.2023</p>
  </div>
  <div class="text">
    <p>Sorting by ID & Date</p>
  </div>
  <div class="title">
    <h4>History and Careplans </h4>
  </div>
  <div class="description">
    <p>This is an example table</p>
  </div>
</div>
<div class="table-container">
  <table>
    <colgroup span="1"></colgroup>
    <thead>
      <tr>
        <th rowspan="2">Meeting</th>
        <th rowspan="2">Nr</th>
        <th rowspan="2">T. ID</th>
        <th rowspan="2">No.</th>
        <th rowspan="2">Action/Event</th>
        <th rowspan="2">Interval</th>
        <th rowspan="2">Aids</th>
        <th colspan="3" scope="colgroup">Effort target</th>

        <th rowspan="2">Expense <br> Material</th>
        <th rowspan="2">Visa</th>
        <th rowspan="2">Execution date</th>
      </tr>
      <tr>
        <th>Height</th>
        <th>Standard [h]</th>
        <th>Species [h]</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="2">2004 06</td>
        <td>1.010</td>
        <td></td>
        <td>Example</td>
        <td>Scope:387 cm Height: 28 m</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      ---More rows---

      <div class="page-footer">
        <div>302 T.</div>
        <div>Page 1 of 17</div>
      </div>
    </tbody>
  </table>
</div>
Tags:

2

Answers


  1. 0

    Based on the provided code snippet, it seems that you’re attempting to create a fixed header for your table and ensure that the header appears on every page when printing. However, the header is overlapping with the table on pages other than the first one.

    One possible solution is to use a separate <table> element for the header and wrap both the header table and the data table within a container <div>. This way, you can control the positioning of the header independently from the data table. Here’s an example of how you can modify your HTML structure:

    <div class="header">
  <!-- Header content goes here -->
  <!-- ... -->
</div>
<div class="table-container">
  <table class="header-table">
    <!-- Header table content goes here -->
    <!-- ... -->
  </table>
  <table class="data-table">
    <!-- Data table content goes here -->
    <!-- ... -->
  </table>
</div>

    Then, in your CSS, you can add styles for the .header-table and adjust the margin-top of the .table-container to create enough space for the header. Here’s an updated CSS snippet:

    @media print {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .table-container {
    margin-top: 120px; /* Adjust this value as needed */
  }

  .header-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    /* Add any additional styling for the header table */
  }
}

    With this approach, the header table will be fixed at the top of each printed page, and the data table will be displayed below it without any overlap.

    Note: Make sure to update the styles and adjust the margin-top value based on your specific layout and requirements.

    Login or Signup to reply.
  2. 0

    If you change the position to absolute and set the top to the position you want from the top of the page, you’ll get a page of a touch over 20cm

    .page-footer {
  position: fixed;
  bottom: 0px;
  width: 97.3%;
  padding: 3px 1px;
  background-color: #ffffff;
  border-top: 1px solid #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

    becomes

    .page-footer {
  position: absolute;
  top: 20cm;           // this instead of a bottom attribute
  // etc. etc
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search