473,411 Members | 1,880 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,411 software developers and data experts.

display:none for table columns?

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.css" type="text/css">
<link rel="stylesheet" href="print0.css" 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
3 17757
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><th id='h1'>column heading 1</th>...<th id='h6'>column
heading 6</th></tr></thead>
<tbody>
<tr><td headers='h1'>row 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

Uzytkownik "David Lee" <t.*****@durham.ac.uk> napisal w wiadomosci
news:Pi*****************************@arachne.dur.a c.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.css" type="text/css">
<link rel="stylesheet" href="print0.css" 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
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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
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...
1
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...
0
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....
1
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...
2
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"...
2
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...
5
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...
1
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...
0
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> ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
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...
0
tracyyun
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...
0
agi2029
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,...
0
isladogs
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...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.