display:none for table columns?

David Lee

I have some web pages on which I'd like to suppress certain items when
printing. This is mostly working nicely:

index.htm (here stripped to relevant essentials) has:

<head>
<link rel="stylesheet " href="style0.cs s" type="text/css">
<link rel="stylesheet " href="print0.cs s" type="text/css" media="print">
<head>
<body>
Always see this.
<div class="noprint" >
See this on screen; but don't print.
</div>
Always see this.
</body>

and "print0.css " has:

.noprint {
display: none;
}

That seems fine.
But I also have a table from which I would similarly like some print-time
suppression, this time of certain columns. I'm trying:

<table ...>
<colgroup>
</colgroup>
<colgroup class="title">
</colgroup>
<colgroup span=3 class="noprint" >
</colgroup>
<colgroup class="comment" >
</colgroup>
[... table contents ...]
<table>

That is, six columns (1 to 6) visible when browsing; but when printing,
suppress 3,4 and 5, and only print columns 1, 2 and 6.

Any thoughts on how to make this functionality work (at least for
reasonably CSS-compliant browsers)? A "known-good" demonstration example
would be nice. Do any exist? Or is the concept not supported?
--

: David Lee I.T. Service :
: Senior Systems Programmer Computer Centre :
: Durham University :
: http://www.dur.ac.uk/t.d.lee/ South Road :
: Durham DH1 3LE :
: Phone: +44 191 334 2752 U.K. :

Jul 21 '05 #1

Subscribe Reply

17776

Chris Morris

David Lee <t.*****@durham .ac.uk> writes:

But I also have a table from which I would similarly like some
print-time suppression, this time of certain columns. I'm trying:

That is, six columns (1 to 6) visible when browsing; but when
printing, suppress 3,4 and 5, and only print columns 1, 2 and 6.

Any thoughts on how to make this functionality work (at least for
reasonably CSS-compliant browsers)? A "known-good" demonstration
example would be nice. Do any exist? Or is the concept not supported?

Styling based on columns is tricky because the cells are not
descendants of the columns.

What I tend to do for this is:
<table>
<thead><tr><t h id='h1'>column heading 1</th>...<th id='h6'>column
heading 6</th></tr></thead>
<tbody>
<tr><td headers='h1'>ro w 1, col 1</td>...</tr>
</tbody>
</table>

and then in the stylesheet
@media print {
#h3, #h4, #h5,
[headers~=h3],
[headers~=h4],
[headers~=h5] {
display: none;
}
}

This additionally gives a nice accessibility improvement for some
browsers.

The [a~=b] selector isn't supported in IE, but it will work in recent
graphical browsers fine.

--
Chris

Jul 21 '05 #2

Pawel Knapik

Uzytkownik "David Lee" <t.*****@durham .ac.uk> napisal w wiadomosci
news:Pi******** *************** ******@arachne. dur.ac.uk...

I have some web pages on which I'd like to suppress certain items when
printing. This is mostly working nicely:

index.htm (here stripped to relevant essentials) has:

<head>
<link rel="stylesheet " href="style0.cs s" type="text/css">
<link rel="stylesheet " href="print0.cs s" type="text/css" media="print"> <head>
<body>
Always see this.
<div class="noprint" >
See this on screen; but don't print.
</div>
Always see this.
</body>

and "print0.css " has:

.noprint {
display: none;
}

That seems fine.
But I also have a table from which I would similarly like some print-time
suppression, this time of certain columns. I'm trying:

<table ...>
<colgroup>
</colgroup>
<colgroup class="title">
</colgroup>
<colgroup span=3 class="noprint" >
</colgroup>
<colgroup class="comment" >
</colgroup>
[... table contents ...]
<table>

That is, six columns (1 to 6) visible when browsing; but when printing,
suppress 3,4 and 5, and only print columns 1, 2 and 6.

Any thoughts on how to make this functionality work (at least for
reasonably CSS-compliant browsers)? A "known-good" demonstration example
would be nice. Do any exist? Or is the concept not supported?

Use the following:

<style>
@media print {
/* This works for IE6.0 */
col.noprint { display:none; }

/* This is for Mozilla and Opera */
td+td+td { display:none; } /* hides 3rd and following cells */
td+td+td+td+td+ td { display:table-cell; } /* shows 6th cell back */
}
</style>
<body>

<table>
<col />
<col />
<col class="noprint" />
<col class="noprint" />
<col class="noprint" />
<col />

<tr>
<td>cell in column 1</td>
<td>cell in column 2</td>
<td>* cell in column 3 *</td>
<td>* cell in column 4 *</td>
<td>* cell in column 5 *</td>
<td>cell in column 6</td>
</tr>
<table>

</body>

Jul 21 '05 #3

Christoph Päper

David Lee:

But I also have a table from which I would similarly like some
print-time suppression, this time of certain columns.

The intended way of doing this is:

col, colgroup {visibility: collapse;}

I have never needed or tested this, though.

Jul 21 '05 #4

Similar topics

1586

table realign on display:none.

by: Abhishek Sur | last post by:

dear all, i have a table wherein, upon clicking, some columns are hidden by the 'display:none' attribute set from javascript. as a result, the table is realigned. specifically, since the table is n x 2, whenever an element in column 0 is hidden, the corresponding element from column 1 is dragged across into column 1. this happens in IE6.0. ...

HTML / CSS

5406

display:none/block switching, hover probem

by: Jon W | last post by:

This is a small table with hover on the table cells. The first cell is setup to switch from div element to input element by use of display:block/none. In IE, onclick the input element is displayed correctly but it disappears if another hover is triggered. Any thoughts? Thanks,Jonny <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

HTML / CSS

5815

DOM CSS display:none/block switching hover problem

by: Jon W | last post by:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title>rolly</title> <!-- The desired performance for this gem would be to: 1. click on table cells 2. edit in INPUT 3. click away, data presented in table cell. 2.0 The table cells have hover highlighting.

HTML / CSS

3697

display: none -> block -> table-row

by: Laurel | last post by:

Hi, Do you know some browsers that would misbehave with these three lines of CSS code: table.liste tr {display:none;} table.liste tr.headers {display: block;} table.liste tr.headers {display: table-row;}

HTML / CSS

9026

problem - myDiv.style.display='none' doesn't make anything invisible.

by: Jake Barnes | last post by:

Imagine I've this block of HTML: <p>Alex Schein Mailing List <input type="checkbox" name="newslettersToUse" value="133156"> (<a href="mcControlPanel.php" onClick="hideOrShowDivById('emailList133156'); return false;">See emails?</a>)</p> <form method="post" action="mcControlPanel.php" id="emailList133156" style="display:none;"><textarea...

Javascript

11687

Show/hide table columns

by: jeet_sen | last post by:

Hi, I have created a table colelcting data from an XML source. After I built the whole table I ahve given user options to filter out columns from the table. For this I have collected all the column values of the table in a select list box. Depending on what user selects from the selct list I am displaying the corresponding columns and...

Javascript

7278

invisible table columns

by: my.shabby.sheep | last post by:

Hi, I want to do the following. I want to make a table column invisible to the screen, but I still want to be able to get the innertext that would have been stored in the cell for certain operations. What would be the best way to do this. I currently added an invisible attribute to the column tag. Please help

Javascript

1920

I am using display:none with using Table

by: jelumalai | last post by:

I am using display:none with using Table. When show the onClick using javascript. Then it will show, again i will hide, content only hidden, but that table doesn't hide. <script> function tableHide() { var tableID = document.getElementById("TableID"); if (tableID.style.display=="none") { tableID.style.display="block"; } else {

HTML / CSS

1884

display:none doesn't work in IE, but works in Firefox

by: Arjun Durai | last post by:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Testing</title> <meta name="description" content="."> <link rel="stylesheet" href="readme_files/screensmall.css" type="text/css" media="screen"> ...

HTML / CSS

7520

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...

General

7718

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...

C / C++

7470

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

7809

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...

General

6041

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...

Career Advice

5368

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...

Microsoft Access / VBA

5088

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...

C# / C Sharp

3480

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

763

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General