XHTML/CSS/Javascript façon de faire une colonne de table sélectionnable?

Question

J'utilise un simple TABLE pour afficher des données tabulaires où les lignes doivent s'aligner, mais quand il s'agit de sélectionner le contenu de la table, je veux seulement que les utilisateurs puissent sélectionner dans chaque colonne. Le comportement par défaut du navigateur consiste à sélectionner des lignes sur toutes les colonnes, mais nous avons BESOIN d'autoriser la sélection uniquement dans les colonnes. J'espérais qu'il y avait un nouveau moyen CSS ou XHTML 1.0 pour définir les tables comme des colonnes au lieu de lignes et que les navigateurs forceraient la sélection. Je sais que cela n'est probablement pas possible et je vais devoir créer une méthode de sélection JavaScript pour remplacer la sélection du navigateur. Évidemment, les tableurs de tableur javascript comme Google Spreadsheets permettent la sélection dans les lignes et les colonnes comme je le souhaite mais j'espère trouver un widget de type grille construit sur Prototype ou écrire mes propres fonctionnalités.

Des conseils ou des liens vers des widgets avec cette sélection de colonne intégrée? Existe-t-il un truc HTML/CSS pour faire quelque chose comme ça?

Answer 1

Je ne suis pas sûr de ce que vous voulez dire, mais il semble que vous vouliez pouvoir colorer une seule colonne différemment des autres colonnes. La façon la plus simple serait d'utiliser les balises colgroup et col:

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 volé http://www.webmasterworld.com/forum83/6826.htm

Il y a seulement un sous-ensemble des propriétés CSS peut être défini sur des colonnes. W3C a un list of those.

Answer 2

Si vous ne souhaitez que mettre en évidence une colonne lorsque l'utilisateur clique sur la table, vous pouvez facilement le faire en jquery

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

Answer 3

Utilisez la balise colgroup - http://www.w3schools.com/tags/tag_colgroup.asp

Vous pouvez appliquer un style que vous voulez à la colonne entière. Changer le style lorsque la souris bouge/clique dans la colonne peut être accompli dans jquery ... vous pouvez utiliser les scripts des autres réponses ici, mais remplacer le sélecteur "table td" par "table colgroup".