XHTML/CSS/Javascript way to make a TABLE COLUMN selectable?

Question

I am using a simple TABLE to display tabular data where the rows need to line up but when it comes to selecting the table contents, I only want users to be able to select within each column. Default browser behaviour is to select as rows across all columns but we NEED somehow allow selection only within columns.

I was hoping there was a fancy new CSS or XHTML 1.0 way to define tables as columns instead of rows and browsers would then force selection within them. I know realize this probably isn't possible and will need to build a javascript selection way to override browser selection. Obviously javascript spreadsheet widgets like Google Spreadsheets allow selection within rows and columns as I require but I am hoping to find a grid-type widget built on Prototype or write my own functionality.

Any tips or links to widgets with this column selection builtin? Is there an HTML/CSS trick to make something like this work?

Answer 1

I'm not sure what you mean, but it seems like you want to be able to color a single column differently than other columns. The simplest way would be to use the colgroup and col tags:

css

.name {width:5em;background:#ccc;}
.value {width:3em;text-align:center;color:#f00;}
.comment {text-align:right;}

HTML

<table>
<caption>My Test Table</caption>
<col class="name">
<colgroup class="value" span="3"></colgroup>
<col class="comment">
</colgroup>
<tr>
<th>Name</th>
<th>Value 1</th>
<th>Value 2</th>
<th>Value 3</th>
<th>Comment</th>
</tr>
<tr>
<td>Bob</td>
<td>Yes</td>
<td>No</td>
<td>42</td>
<td>I like cheese</td>
</tr>
<tr>
<td>Susan</td>
<td>No</td>
<td>Yes</td>
<td>42</td>
<td>Sharp Cheddar</td>
</tr>
</table>

Code stolen from http://www.webmasterworld.com/forum83/6826.htm

There are only a subset of CSS properties that can be set on columns. W3C has a list of those.

Answer 2

try jQuery

Answer 3

If you want only to highlight a column when user clicks on the table, you can easily do that using jquery

$("table td").bind('click',function(){
            $("table td").css('background','');
            $(this).css('background','green');
         });

Answer 4

Use the colgroup tag - http://www.w3schools.com/tags/tag_colgroup.asp

You can apply any style you want to the entire column. Changing the style when the mouse moves / clicks in the column can be accomplished in jquery... you could use the scripts from the other answers here, but replace the "table td" selector with "table colgroup".