Trying to Print One Table Only

HTML & CSS
1

I am trying to print, using CSS, one table only from a table based design and cannot seem to get it to work. (Very similar to this post)

The whole site is filled with tables and I don’t want to have to set an id for each one and set it to display:none. Isn’t there a way to just say don’t display anything except this one table?

This has been the closest I’ve gotton:



CSS:

<style type="text/css">
@media print {

* {
    visibility: hidden;
  }

  #print* {
    visibility: visible;
  }
}
</style>

HTML:

<table... id="print">

but the text in the table doesn’t span across the page in print mode.

A List Apart, Print It Your Way seems to be the closet thing I’ve found so far.

Thanks.

2

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Print Tables</title>

<style type="text/css" media="print">
table {
	display: none;
	}
	
#t2 {
	display: table;
	}
</style>

<style type="text/css" media="screen">
table {
	border: 1px solid #444;
	margin: 0 0 10px 0;
	}
</style>
</head>

<body>

<table id="t1">
	<tr>
		<td>This is table #1.  Should not be printed.</td>
	</tr>
</table>

<table id="t2">
	<tr>
		<td>This is table #2.  <strong>Should see this in the printout.</strong></td>
	</tr>
</table>

<table id="t3">
	<tr>
		<td>This is table #3.  Should not be printed.</td>
	</tr>
</table>

</body>
</html>