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
Javascript DOM 1
Sort by number of characters 1
Can anyone please help? HTML - two tables applying different styles 4
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Updating Inventory using First In First out(FIFO) 1
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0

Members online

Total: 32 (members: 1, guests: 31)
Robots: 379

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,014
Latest member
BiancaFix3

Latest Threads

Top