Member Avatar for EnderX

I built a php-driven form that is intended to have its results printed out and shipped to another location. The results are laid out as a set of tables that hold the information in place. I tested the page on a system wher ethe default browser isFirefox, which displayed the tables without any kind of border. However, when I transfered over to the system which will actually be running the form, I discovered that the default browser there is IE, and that in IE, there are some nasty borders and partial borders (some tables only have one line for the top border, but two for the sides and bottoms) visible, and I'm fairly sure those will be printed out as well. What methods are there to eliminate visible borders from a table that's being displayed in IE?

Thank you for your consideration,
EnderX

  • 4 Contributors
  • 4 Replies
  • 318 Views
  • 7 Years Discussion Span
  • Latest Post Latest Post by osman.sokuoglu.19

Dani AI

Generated

A short practical add-on to the suggestions already posted by , and — the HTML attribute trick that solved the immediate problem is fine for screen viewing, but printing (and different IE versions) can still introduce stray lines. For a robust, print-friendly result use a small print stylesheet, force a single border model, and handle empty cells explicitly so the printer/renderer cannot draw half-borders.

Use a print-only rule that targets only the tables meant for the printed output. This forces the rendering model and overrides browser defaults when printing:

@media print {
  table.print-clean {
    border-collapse: collapse;
    border-spacing: 0;
  }

  table.print-clean th,
  table.print-clean td {
    border-width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

If odd partial lines come from genuinely empty cells (the symptom described by ), avoid visible filler characters such as a non‑breaking space. A zero‑width space keeps the cell present without visible content or layout shift:

<td>&#8203;</td>

Notes and troubleshooting tips: using border-collapse: collapse prevents double-strokes created when both table and cell borders are present; set !important in the print stylesheet if a third-party stylesheet keeps adding borders. If the print preview still shows unexpected lines, check for print-driver quirks or printer settings. For guaranteed, machine-independent output (shipping a form for external printing) consider server-side PDF generation (dompdf, TCPDF, wkhtmltopdf) so the same rendered layout prints regardless of client browser. The mobile viewport meta suggested by affects scaling on phones and will not change IE desktop print border behavior.

Recommended Answers

All 4 Replies

Member Avatar for MattEvans

you can turn them off on the table tag itself:

<table border="0"><tr><td>etc</td></tr></table>
[B](this will turn off the border throughout that table)[/B]

or with CSS:

table
{
    border-style:none;
}
[B](this will disable borders for all tables on a page that includes that rule)[/B]

I prefer to do it manually (first example) on all tables, and then turn them on where I want them with CSS.

The partial borders happen when you have cells without data in them.. if you wanted an unbroken border, just put this into otherwise empty cells:

&nbsp;

It will force the cell to 'exist' and be rendered with a proper border.

Member Avatar for EnderX

Thanks for the advice. For some reason the css code didn't want to work right (remember how I said there were two lines in the visible borders? Css code only got rid of one) but the ="0" worked like a charm. Everything appears to be working quite nicely now. Again, thanks.

Member Avatar for MidiMagic

To get rid of both lines, you have to set the attribute for both the table and the td tag (and th if you use it).

To remove the space between the borders, use cellspacing="0" in the table tag.

Member Avatar for osman.sokuoglu.19

try to add this meta :

<meta content="width=device-width; initial-scale=1.0;" name="viewport">

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.