HTML CSS Table/Print Issue

Actually, I’m using a html+css code to generate a daily report. Eventually, everything works well. But sometimes I’m having some issues that I have no idea what I’m doing wrong.

As you can see at the bottom the result looks like cut and is missing some fields:

CODEPEN

    <html>

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
      <title>DAILY REPORT</title>
      <style media="screen">
        img {
          float: right;
        }
        /* reset */
        
        * {
          border: 0;
          box-sizing: content-box;
          color: inherit;
          font-family: inherit;
          font-size: inherit;
          font-style: inherit;
          font-weight: inherit;
          line-height: inherit;
          list-style: none;
          margin: 0;
          padding: 0;
          text-decoration: none;
          vertical-align: top;
        }
        /* content editable */
        
        *[contenteditable] {
          border-radius: 0.25em;
          min-width: 1em;
          outline: 0;
        }
        
        *[contenteditable] {
          cursor: pointer;
        }
        
        *[contenteditable]:hover,
        *[contenteditable]:focus,
        td:hover *[contenteditable],
        td:focus *[contenteditable],
        img.hover {
          background: #DEF;
          box-shadow: 0 0 1em 0.5em #DEF;
        }
        
        span[contenteditable] {
          display: inline-block;
        }
        /* heading */
        
        h1 {
          font: bold 100% sans-serif;
          letter-spacing: 0.5em;
          text-align: center;
          text-transform: uppercase;
        }
        /* table */
        
        table {
          font-size: 75%;
          table-layout: fixed;
          width: 100%;
        }
        
        table {
          border-collapse: separate;
          border-spacing: 2px;
        }
        
        th,
        td {
          border-width: 1px;
          padding: 0.5em;
          position: relative;
          text-align: left;
        }
        
        th,
        td {
          border-radius: 0.25em;
          border-style: solid;
        }
        
        th {
          background: #EEE;
          border-color: #BBB;
        }
        
        td {
          border-color: #DDD;
        }
        /* page */
        
        html {
          font: 16px/1 'Open Sans', sans-serif;
          overflow: auto;
          padding: 0.5in;
        }
        
        html {
          background: #FFF;
          cursor: default;
        }
        
        body {
          box-sizing: border-box;
          height: 11in;
          margin: 0 auto;
          overflow: hidden;
          padding: 0.5in;
          width: 8.5in;
        }
        
        body {
          background: #FFF;
          border-radius: 1px;
        }
        /* header */
        
        header {
          margin: 0 0 0em;
        }
        
        header:after {
          clear: both;
          content: "";
          display: table;
        }
        
        header h1 {
          background: #3499DB;
          border-radius: 0.25em;
          color: #FFF;
          margin: 0 0 1em;
          padding: 0.5em 0;
        }
        
        header address {
          float: right;
          font-size: 75%;
          font-style: normal;
          line-height: 1.25;
          margin: 0 1em 1em 0;
        }
        
        header address p {
          margin: 0 0 0.25em;
        }
        
        header span,
        header img {
          display: block;
          float: left;
        }
        
        header span {
          margin: 0 0 1em 1em;
          max-height: 25%;
          max-width: 60%;
          position: relative;
        }
        
        header img {
          max-height: 100%;
          max-width: 100%;
        }
        
        header input {
          cursor: pointer;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
          height: 100%;
          left: 0;
          opacity: 0;
          position: absolute;
          top: 0;
          width: 100%;
        }
        /* article */
        
        article,
        article address,
        table.meta,
        table.inventory {
          margin: 0 0 3em;
        }
        
        article:after {
          clear: both;
          content: "";
          display: table;
        }
        
        article h1 {
          clip: rect(0 0 0 0);
          position: absolute;
        }
        
        article address {
          float: left;
          font-size: 125%;
          font-weight: bold;
        }
        /* table meta & balance */
        
        table.meta {
          float: left;
          width: 36%;
        }
        
        table.balance {
          float: right;
          width: 36%;
        }
        
        table.meta:after,
        table.balance:after {
          clear: both;
          content: "";
          display: table;
        }
        /* table meta */
        
        table.meta th {
          width: 40%;
        }
        
        table.meta td {
          width: 60%;
        }
        /* table items */
        
        table.inventory {
          font-size: 64%;
          clear: both;
          width: 100%;
        }
        
        table.inventory th {
          font-weight: bold;
          text-align: center;
        }
        
        table.inventory td:nth-child(1) {
          width: 64%;
        }
        
        table.inventory td:nth-child(2) {
          width: 64%;
        }
        
        table.inventory td:nth-child(3) {
          width: 64%;
        }
        
        table.inventory td:nth-child(4) {
          width: 64%;
        }
        
        table.inventory td:nth-child(5) {
          width: 64%;
        }
        /* table balance */
        
        table.balance th,
        table.balance td {
          width: 50%;
        }
        
        table.balance td {
          text-align: right;
        }
        /* aside */
        
        aside h1 {
          border: none;
          border-width: 0 0 1px;
          margin: 0 0 1em;
        }
        
        aside h1 {
          border-color: #FFF;
          border-bottom-style: solid;
        }
        /* hide */
        
        tr.Hidden {
          visibility: hidden;
        }
        /* javascript */
        
        .add,
        .cut {
          border-width: 1px;
          display: block;
          font-size: .8rem;
          padding: 0.25em 0.5em;
          float: left;
          text-align: center;
          width: 0.6em;
        }
        
        .add,
        .cut {
          background: #9AF;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          background-image: -moz-linear-gradient(#00ADEE 5%, #0078A5 100%);
          background-image: -webkit-linear-gradient(#00ADEE 5%, #0078A5 100%);
          border-radius: 0.5em;
          border-color: #0076A3;
          color: #FFF;
          cursor: pointer;
          font-weight: bold;
          text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.333);
        }
        
        .add {
          margin: -2.5em 0 0;
        }
        
        .add:hover {
          background: #00ADEE;
        }
        
        .cut {
          opacity: 0;
          position: absolute;
          top: 0;
          left: -1.5em;
        }
        
        .cut {
          -webkit-transition: opacity 100ms ease-in;
        }
        
        tr:hover .cut {
          opacity: 1;
        }
        
        @media print {
          * {
            -webkit-print-color-adjust: exact;
          }
          html {
            background: none;
            padding: 0;
          }
          body {
            box-shadow: none;
            margin: 0;
          }
          span:empty {
            display: none;
          }
          .add,
          .cut {
            display: none;
          }
        }
        
        @page {
          margin: 0;
        }
      </style>
    </head>

    <body>
      <header>
        <h1>DAILY REPORT</h1>
        <span><img alt="" src="https://www.e-ford.gr/images/photos/bonmygzrgp.jpg"></span>
      </header>
      <article>
        <h1>Recipient</h1>
        <table class="meta">
          <tr>
            <th><span>Report ID #</span></th>
            <td><span>9918371</span></td>
          </tr>
          <tr>
            <th><span>Date</span></th>
            <td><span>January 1, 2012</span></td>
          </tr>
          <tr>
            <th><span>Location</span></th>
            <td><span>London</span></td>
          </tr>
          <tr>
            <th><span>Vendor</span></th>
            <td><span>Jack Sparrow</span></td>
          </tr>
        </table>
        <table class="inventory">
          <thead>
            <tr>
              <th><span>New PT</span></th>
              <th><span>Coverage</span></th>
              <th><span>PT Name</span></th>
              <th><span>Procedures</span></th>
              <th><span>Charge</span></th>
              <th><span>Paid</span></th>
              <th><span>P. Method</span></th>
              <th><span>Prev Bal</span></th>
              <th><span>New Bal</span></th>
              <th><span>Memo</span></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><span><center><input type="checkbox" checked></center></span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>#1, #2, #3, #14, #15, #16, #18, #19, #30, #31 O comp</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
            </tr>
            <tr>
              <td><span><center><input type="checkbox" checked></center></span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Experience Review #1, #2 #3, #4, #5, #7, #9</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
            </tr>
            <tr>
              <td><span><center><input type="checkbox" checked></center></span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Experience Review #1, #2 #3, #4, #5, #7, #9</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
            </tr>
            <tr>
              <td><span><center><input type="checkbox" checked></center></span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Experience Review #1, #2 #3, #4, #5, #7, #9</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
            </tr>
            <tr>
              <td><span><center><input type="checkbox" checked></center></span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Experience Review #1, #2 #3, #4, #5, #7, #9</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
            </tr>
            <tr>
              <td><span><center><input type="checkbox" checked></center></span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Experience Review #1, #2 #3, #4, #5, #7, #9</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
            </tr>
            <tr>
              <td><span><center><input type="checkbox" checked></center></span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Experience Review #1, #2 #3, #4, #5, #7, #9</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
            </tr>
            <tr>
              <td><span><center><input type="checkbox" checked></center></span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span>Experience Review #1, #2 #3, #4, #5, #7, #9</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span data-prefix>$</span><span>150.00</span></td>
              <td><span>Front End Consultation</span></td>
            </tr>

          </tbody>
        </table>
        <table class="balance">
          <tr>
            <th><span>Credit card</span></th>
            <td><span data-prefix>$</span><span>0.00</span></td>
          </tr>
          <tr>
            <th><span>Cash</span></th>
            <td><span data-prefix>$</span><span>0.00</span></td>
          </tr>
          <tr>
            <th><span>Other</span></th>
            <td><span data-prefix>$</span><span>0.00</span></td>
          </tr>
          <tr>
            <th><span>Total collected</span></th>
            <td><span data-prefix>$</span><span>600.00</span></td>
          </tr>
        </table>
      </article>
    </body>

    </html>

If I remove one or two rows then it looks good:

CODEPEN

------------------------------------------

And one more question if I put this in a cell: #1,#2,#3,#14,#15,#16,#18,#19,#30,#31 O comp

For some reason looks weird (I suspect it’s because of the commas) cause if I remove them or add just space after every coma then looks good, but any idea why this is happening?

CODEPEN

Thanks, much appreciated!

Looks fine to me (Chrome 70 @ Linux). Which browser are you using?

That is because the browser doesn’t know where to cut op that text, so it just leaves is at is withouting breaking it. The easiest solution -as you’ve already found- it to put a space after each comma.

1 Like

Hello @rpkamp, thank you so much for your answer.

  1. Yeah you’re right, on Firefox seems the “cut” effect appears before (with fewer rows) than using Chrome but if I add few more, instead of keeping pushing the result tables to bottom it cuts them:
    Firefox:

Chrome:

  1. Yeah for me it’s easy to use adding commas, but the fact is my tool is being used by total 10 users and it’s very hard to track if they are all using it “correctly” adding a space after each comma. Any other idea for this?

Regards,
Much appreciated.

For the cutting off problem, try if removing overflow: hidden; from body helps.

For the space after each comma, how is the data entered? Are you running some script like PHP?
If so, I could show you how to add a space after each comma there. If not, we could look if we can achieve the same using javascript instead.

2 Likes

Using {table-layout:fixed} gives all of the cells the same width regardless of content. And you are working with a fixed width table.

First of all, there is no doctype in the code that you posted. If that is true of the actual page, you need to add a doctype, otherwise cross browser consistency is hampered.

Your best bet seems to be to add widths to some of the columns. The non-width’ed columns will adapt to the changes by becoming slightly wider.

You should realize that the behavior is browser dependent. If the user has set a larger font size as his default, then the layout will again no look so good, so you will need to set specific font-size and possibly width requirements for the print media.

I added this in FF and it seemed to work OK at the moment but turns into clutter if I increase my font-size.

table.inventory th:nth-child(1) {width:4%}
table.inventory th:nth-child(2) {width:10%}
table.inventory th:nth-child(3) {width:10%}
table.inventory th:nth-child(4) {width:13%}
table.inventory th:nth-child(7) {width:10%}
table.inventory th:nth-child(10) {width:10%}
2 Likes

Hello @rpkamp, yeah removing overflow: hidden from body seems fixed the problem.

Now I’m bit worried about point 2. cause I’m loading the data using saved database values. I tried “unformatting” the text adding quotes or brackets but doesn’t help…

Any other suggestion?

Thank you so much,
Much appreciated.

IMHO, it’s a poor idea to have comma separated values in a single field. If this is the case you should improve the database design if you can. If not the case, and is because the query is concatenating the values that way, you can change the query to add spaces.

Less desirable approaches would be to add the spaces when the values are INSERTed, run UPDATEs to add the spaces, add the spaces when SELECTed (as above), or use JavaScript to add the spaces.

Hello, the database has comma separated values because the database field comes from a user input. Sometimes it only contains letters but other times like this case it has to add some commas.

My question is just trying to understand what If I need to display numbers separated by commas in a table. I don’t understand why this is happening only with commas when actually I’m specifying with <td> the next text should be not considered as part of any code

<td><span>#1,#2,#3,#14,#15,#16,#18,#19,#30,#31 O comp</span></td>

It just to me bit weird cause sometimes when I need to do something using Javascript adding “quotes” solves this kind of problem.

And how do you read the values from the database?

Use word-wrap:break-word on the td to break any unbroken strings of text to stop them overlapping other cells.

table.inventory td,
table.inventory th {
  word-wrap: break-word;
}
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.