CSS: using js to collapse columns in tables

E

Erwin Moller

Hi all,

Is it possible to collapse certain columns in a rendered table?
I have been fiddling around with CSS and visibiliy: collapse, but I cannot
get it working in NN6 and IE6 and firefox.

What I want/tried is something like this:

<STYLE TYPE="text/css">
TABLE {border-collapse: collapse;}
.hidecol {visibility: hidden;}
</STYLE>

<table>
<col><col class="hidecol"><col>
<tr>
<td>row1col1</td>
<td>row1col2</td>
<td>row1col3</td>
</tr>
<tr>
<td>row2col1</td>
<td>row2col2</td>
<td>row2col3</td>
</tr>
</table>

But even before I use JS to manipulate the visibility of the second column,
things go wrong: the second column is just displayed.

I am fairly new to CSS, not to JS.

Can somebody help me solving this?

In the end I want the client to choose which columns are visible in the
table. (Preferably on all major browsers)

Thanks for your time.

Regards,
Erwin Moller
 
R

RobB

Erwin said:
Hi all,

Is it possible to collapse certain columns in a rendered table?
I have been fiddling around with CSS and visibiliy: collapse, but I cannot
get it working in NN6 and IE6 and firefox.

What I want/tried is something like this:

<STYLE TYPE="text/css">
TABLE {border-collapse: collapse;}
.hidecol {visibility: hidden;}
</STYLE>

<table>
<col><col class="hidecol"><col>
<tr>
<td>row1col1</td>
<td>row1col2</td>
<td>row1col3</td>
</tr>
<tr>
<td>row2col1</td>
<td>row2col2</td>
<td>row2col3</td>
</tr>
</table>

But even before I use JS to manipulate the visibility of the second column,
things go wrong: the second column is just displayed.

I am fairly new to CSS, not to JS.

Can somebody help me solving this?

In the end I want the client to choose which columns are visible in the
table. (Preferably on all major browsers)

Thanks for your time.

Regards,
Erwin Moller
Click to expand...

http://www.gtalbot.org/HTMLJavascriptCSS/TableRowColumnCollapse.html
 
B

Brian Munroe

Well, eventhough this is remotely related to javascript :) - what you
need to do is change the css property 'display'. This is of course
assuming you want the columns to disappear and have the rest of the
table collapse?

Try changing the display property to either 'inline' or 'none' to see
what effect it has on the table.

HTH

-- brian

<html>
<body>

<style type="text/css">

..col1 { display: inline; }
..col2 { display: inline; }
..col3 { display: inline; }

..table1 {
border: 1px solid;
border-collapse: collapse;
width: 300px;
}

..table1 td {
border: 1px solid;
}

</style>


<table class="table1">
<tr>
<td class="col1">1,1</td>
<td class="col2">1,2</td>
<td class="col3">1,3</td>
</tr>
<tr>
<td class="col1">2,1</td>
<td class="col2">2,2</td>
<td class="col3">2,3</td>
</tr>
</table>

</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Colspan probs 2
Bootstrap contact form not working 2
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
Need help with <rowspan> in an HTML table 1
Javascript DOM 1
Sort by number of characters 1
Can anyone please help? HTML - two tables applying different styles 4

Members online

No members online now.
Total: 279 (members: 0, guests: 279)
Robots: 320

Forum statistics

Threads
474,432
Messages
2,571,681
Members
48,796
Latest member
Greg L.

Latest Threads

Top