CSS Styles for printing tabular data.

[rockyroad]

Hi, does anyone know of a goood standard .CSS print stylesheet for data tables? I have a good data table stylesheet I am using for screen, but all attempts I have made at adding style to these same tables for print has failed... most specifically, I cannot get any border attribute values to be recognized in the printed piece... consider my print style and markup:

Style:

DataTable table{
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	border-width:medium;
	padding:0;
	font-size:9pt;
}
.DataTable  thead th{
	background-color:#cccccc;
	padding:7px 10px;
	font-size:9pt;
	color:#000000;
	text-align:left;
	border: 1px solid #000000;
}
 .DataTable  tbody td,tbody th{
	font-size:9pt;
	padding:3px;
	margin-bottom:5px;
	background:#ffffff;
	border: 1px solid #000000;
}
.DataTable tbody th{
font-size:9pt;
background-color:#cccccc;
	color:#000000;
		border: 1px solid #000000;
}
.DataTable tbody tr.odd td{
background-color:#cccccc;
font-size:9pt;
}
.DataTable tbody tr.odd th{
	background-color:#ffffff;
	font-size:9pt;
}

.DataTable tfoot td,tfoot th{
	border:none;
	padding-top:10px;
	font-size:9pt;
}
.DataTable caption{
	text-align:left;
	/* text-transform:uppercase; */
	font-size:11pt;
	padding:10px 0 5px 5px;
	color: #000000;
	font-weight:bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
.DataTableLeft{
margin-left:0;
}

Markup:

<table align="center" width="97%" border="0" cellspacing="1" cellpadding="0" class="DataTable">
<thead>
<tr>
	<th width="5%">1</th>
	<th width="20%">2</th>
</tr>
</thead>
		
<tbody>
<tr>
	<td width="5%" valign="top">1</td>
	<td width="20%" valign="top">2</td>
</tr>
</tbody>	
</table>

The result on my end is the table prints with no border.

Any help would be great!

Thanks

RR

 

[Vragabond]

My tables always seem to keep the borders without problems for printing. Backgrounds get ignored, but borders shouldn't. Are you sure you're not applying your stylesheet to screen only?

 

[CrazyLoginWay]

DataTable table{
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-width:medium;
padding:0;
font-size:9pt;
}

check this class declaration you've made. You'll see where you were wrong !

Maybe you wanted to do something like this:

table.DataTable {
border: 1px solid #000000;
/* border-width:medium; this has no use here */
padding:0;
font-size:9pt;
}