Force table borders to print?

[ideasworking]

Hello,

Can someone help me with a CSS question? I would like to print a specific tables borders. Following suggestions from another question I changed my CSS to the following.

<style type="text/css" media="print">
.noprint { display: none; }
.borderprint {border-bottom:1px solid black;
border-top:1px solid black;
border-right:1px solid black;
border-left:1px solid black;}
</style>

Now I have to add class="borderprint" to every cell and there are spaces between the borders.

How do I avoid the whitespace between borders and is there a better way to cause all borders to print rather than adding the class="borderprint" to every <TD>?

Thanks,
Lou

 

[Vragabond]

There is. The whitespace is there because of the borders not collapsing, meaning that every cell has a border of each own, not that adjoining borders are treated as one. To alter that, you need to add:

border-collapse: collapse;

to your table definition. As for the class. Apply the class to the table tag and change the css to read:

.borderprint th,
.borderprint td {
  border: 1px solid black;
}

This means that every th and td elements within an element that has a class of 'borderprint' will have 1px solid borders applied to them.

 

[ideasworking]

Thanks for the reply... This is helping but I'm obvilusly still doing something wrong because the whitespace is still there.

Please have a look at the code

<style type="text/css" media="print">
.noprint { display: none; }
.borderprint th,
.borderprint td {
border: 1px solid black;
border-collapse:collapse;
}

<table width='650' border='0' align='center' cellpadding='1' bgcolor="#000000" class="borderprint td">

Thanks,
Lou

 

[Vragabond]

You're doing a lot of things wrong and it seems that you only copy and paste whatever I tell you wherever you think they will fit best. I suggest you read my message again in particular,

1. regarding whitespace this part:

To alter that, you need to add:
border-collapse: collapse;
to your table definition.

2. regarding the border this part:

This means that every th and td elements within an element that has a class of 'borderprint' will have 1px solid borders applied to them.

In the mean time, you can answer me why I take the time and effort to explain this to you if you disregard it?

 

[cLFlaVA]

Vrag, have some coffee! chillllllll.

ideasworking,

"to your table definition" means you need to create (if you do not already have one) a style definition for your table, separate from that of your td and th.

something like:

table {
    border-collapse: collapse;
}

just reiterating and clarifying Vrag's very helpful and complete response...



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ideasworking]

Thanks guys,

I did add the border-collapse: collapse to my table definition in the beginning. However that caused the table to vanish from the screen. I want to see the table both in print and on the monitor.

Sorry maybe I should have explained that in the beginning. I just thought that since the table was already viewable on the monitor all I would have to do is change the printable version.

So... what should I do to make the table visible in print and on the monitor?

Thanks,
Lou