Displaying text within an HTML table featuring a vibrant background

I'm having trouble printing a basic certificate that is formatted as an HTML table. There are a couple of frustrating issues I'm facing. 1) When I try to print the table using Chrome, my CSS changes are not being applied. 2) I can't seem to consistently center the text in the correct places. 3) I'm struggling to rotate the entire table for printing in portrait orientation.

Here is a snippet of my CSS:

@media print {
        /* show cover in print */
        .cover {
            display: block;
        }
        .dvCertWrapper {

        }
        .cert {
            width: 1080px!important;
            content: url('../Content/images/certificate.jpg');
            margin-left: -210px;
            background-repeat: no-repeat;
            background-position: right top;
            background-attachment: fixed;
        }
        .certContent {
            display: block;
            margin-top: -680px;
            width: 100%;
            text-align: center;

           }
        .startDate {
            display: block;
            font-family: "Century Schoolbook" !important;
            font-size: 20px;
            font-style: normal;
            margin-top: -170px;
            margin-left: -102px;
            position: absolute;
        }
        .endDate {
            display: block;
            font-family: "Century Schoolbook" !important;
            font-size: 20px;
            font-style: normal;
            margin-top: -10px;
            margin-right: -60px;
            position: absolute;
        }
        /* hide other elements in print */
        button {
            display: none;
        }

        .smallText {
            font-size: .8em;
            width: 800px;
        }
        table {
            border-collapse: collapse;
            width: 1800px;
        }
    }

And here is a snippet of my table definition:

<table  class="certContent" style="display: block">
        <tbody >
            <tr style="width: 800px !important">
                <td class="smallText">&nbsp;Valid From:&nbsp;{{vendor.dStartDate}}</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="smallText">Valid Till: {{vendor.dEndDate}}&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <th colspan="4">&nbsp;{{vendor.sBusinessnameLegal}}</th>
            </tr>
            <tr>
                <th colspan="2">{{vendor.iSic1}}</th>
                <th colspan="2">{{vendor.iSic2}}</th>
            </tr>
            <tr>
                <td colspan="2">{{vendor.iSic3}}</td>
                <td colspan="2">{{vendor.iSic4}}</td>
            </tr>
            <tr>
                <td colspan="4">&nbsp;</td>
            </tr>
        </tbody>
    </table>

I've tried different approaches with no success so far. Any tips or advice would be greatly appreciated. Thank you.

Answer №1

When it comes to printing, the user's system settings take precedence over the page being printed, requiring manual adjustment of paper orientation and size in the print dialog box.
In this example, I have tailored the layout to fit legal paper by converting a table into a series of rows that can be adjusted in height.

body {
  height: 100%;
  width: 100%;
  margin: 0;
}
button {
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px 20px;
}
.cover {
  display: none;
  height: 8.5in;
  width: 14in;
}
.cert {
  display: block;
  height: 8.5in;
  width: 14in;
  max-width: 14in;
  max-height: 8.5in;
  position: relative;
}
.cert-img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.cert-content {
  height: calc(100% - 1.6in);
  width: calc(100% - 2.8in);
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.8in 1.4in;
  display: flex;
  flex-direction: column;
}
.row {
  width: 100%;
  display: inline-block;
  color: black;
  font-size: 20pt;
  display: flex;
}
.row span,
.row .v-stack {
  flex: 1;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.row-padding {
  height: 0.4in;
}
.val {
  color: red;
}
#valid-to,
#valid-to-value,
#addr-2 {
  text-align: right;
}
#tax-license,
#sig {
  text-align: center;
}
.row-2 {
  margin-bottom: 0.3in;
}
.holder {
  text-align: center;
}
.row-3 {
  margin-bottom: 0.3in;
}
.row-4 table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18pt;
}
.row-5 {
  height: 2in;
  flex: 1;
}
.row-5 p {
  width: 100%;
  text-align: center;
}
.row-6 {
  margin-bottom: 0.5in;
}
@page {
  margin: 0;
  size: 14in 8.5in landscape;
}
@media print {
  .cover {
    display: block;
  }
  button {
    display: none;
  }
}
<div class="cover">hello again!</div>
<section class="cert">
  <img class="cert-img" src="https://i.sstatic.net/JwmVt.png" />
  <div class="cert-content">
    <div class="row row-0 row-padding"></div>
    <div class="row row-1">
      <span id="valid-from">valid from</span>
      <span id="tax-license">tax license <span class="val" id="tax-license-value">000000</span></span>
      <span id="valid-to">valid to</span>
    </div>
    <div class="row row-2">
      <span class="val" id="valid-from-value">date</span>
      <span class="val" id="valid-to-value">date</span>
    </div>
    <div class="row row-3">
      <span class="holder val">holder name</span>
    </div>
    <div class="row row-4">
      <table class="val">
        <tr>
          <td>Allowed to sell</td>
          <td>Allowed to sell</td>
        </tr>
        <tr>
          <td>Allowed to sell</td>
          <td>Allowed to sell</td>
        </tr>
      </table>
    </div>
    <div class="row row-5">
      <p>The business named above...</p>
    </div>
    <div class="row row-6">
      <div class="v-stack" id="addr-1">
        <ul>
          <li>pobox</li>
          <li>addr</li>
        </ul>
      </div>
      <span class="val" id="sig"><img />signature</span>
      <div class="v-stack" id="addr-2">
        <ul>
          <li>pobox</li>
          <li>addr</li>
        </ul>
      </div>
    </div>
  </div>
</section>
<button onclick="window.print()">Print</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JQuery functions for click and hover are not functioning as expected on a div element

I am having trouble with a div that I have declared. The click event is not working as expected, and I also need to use the :hover event in the css, but it isn't functioning either. What could be causing this issue? <div id="info-button" class="in ...

Angular controller unit testing is an essential practice in software development

I am currently working with an angular module named 'widgets'. In my app, I have used its signature as follows: var app = angular.module('widgets', [ 'widget.Panel', 'widget.List', 'services' ] ...

Ways to implement the CSS on images with an ID such as img120 within a div that has a class of 'open'

<div class='cluster' id='12' 'style='width:350px;min-height:150px;border:4px solid #339966;'> <div class='image' style='width:150px;height:150px;border:2px solid black;float:left;margin-bottom: ...

What is causing this form to submit?

I need help with sending emails via AJAX. My problem is that the form keeps submitting and refreshing, even though I haven't used GET to send anything in the URL. HTML: <form onsubmit="ajaxEmail(); return false;" > <input type=" ...

What is the best way to manage undefined status in react after the user chooses to cancel selecting a file?

Having an issue with my simple Input file type in React. I'm storing the selected file in state, but when I click the clear button, the state doesn't actually get cleared. This leads to {selectedFile.name} throwing an undefined error if the user ...

Connect the drawer state in Vuetify when the navigation drawer and app bar are separate components

Currently, my Dashboard consists of two components: Dashboard <template> <v-app> <Toolbar :drawer="app.drawer"></Toolbar> <Sidebar :drawer="app.drawer"></Sidebar> </v-app> </template> ...

Holding off on executing the event handler until the completion of another function

On our website, we've integrated a 3rd party solution that cannot be directly updated. However, I can insert my own JavaScript code to manipulate the solution. This third-party tool includes a button that triggers an AJAX request. Before this request ...

Is it possible to Maintain a Constant Pixel Font Size while Allowing for Responsive Text Size?

When viewing a site like the mobile version of , I noticed that the text size adjusts responsively, but the active font-size remains constant at 34px. To see how this works on different screen sizes, check out this comparison. Even when changing the wind ...

Issues encountered when trying to use default color classes in Tailwind CSS

I'm currently working on a React project that utilizes the Tailwind CSS Framework. To integrate Tailwind into my React app, I used NPM to install it in the following way: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p After i ...

Encountering a TypeError stating that the "option is undefined" error has occurred

Unexpectedly, my dropdown menu that was functioning perfectly fine is now throwing an error. I've made several changes and none of them seem to resolve the issue. Could it be a data type mismatch or am I missing something crucial here? Your insights ...

Troubleshooting the malfunction of jQuery's change() function

There are three HTML select tags on my page. I want these three select tags to function as follows: When I change selectA, selectB should automatically update based on the selection in selectA. Similarly, when an option in selectB is created, changing se ...

Clickable elements are not functioning on dynamically generated divs

In the process of developing an application using Angular, I encountered a scenario where I needed to fetch and display data from a web service. The challenge was in dynamically creating div elements with the retrieved data: for(var i = 0 ; i < data.Ou ...

Whenever I create the code using javascript, padding seems to always show up

I have a basic stacked row layout that displays an upper box and lower box without any padding. <span id="route" class="small"> <div class="row" style="border-style:solid;"> <div class="col-md-12 col-12"> <p>UpperBox</p& ...

What are the advantages of utilizing NGRX over constructor-injected services?

Have you ever wondered about the benefits of using NGRX or NGXS for an Angular application instead of constructor injected services to manage component IO? Is it simply to prevent mutation of component properties references without replacing the entire pr ...

conducting a validation using ajax when submitting

Currently, I am exploring the implementation of AJAX validation within a submit() handler for a web form. The AJAX functionality is executed using $.ajax() from jQuery. While setting async: false yields successful results, it triggers a deprecation notice, ...

Is it possible to design a Controller and View that can manage the creation of one-to-many objects, specifically a single "container" object along with an unlimited number of "content"

One of the functionalities for users on the website will be the ability to create documents made up of chapters in a one-to-many relationship. Traditionally, this would involve creating separate views for chapter and document creation. How can I develop ...

"Vanishing Act: Bootstrap menu vanishes after a click

Having difficulties with the menu on my website wrapster.sebastianbialek.pl. Whenever I resize the browser to mobile version and click on the collapse button, the menu shows up briefly and then disappears. Any assistance in resolving this issue would be gr ...

Tips for utilizing a dropdown menu in Angular

<div> <label> Categories </label> <select> <option *ngFor = "let category of categories" [value] = "category" (click) = "onCategorySelected( category.name )"> ...

Issue with DIV positioning in IE when another DIV is animated downwards

Here's how my page structure looks like: <header> <div class="slide"> <!---- some elements here ---> </div> <nav> <ul> <li id="open"></li> <! --- other parts of the navigation ...

Aggregating MongoDB: Calculating unique values within an array

Looking to find the distinct tags count on all records within a mongodb query, utilizing JS. Data structure of the record: { "_id": { "$oid": "62e593aed8fd9808777225e8" }, "title": "“The world as ...