CSS / jQuery selector for a table column

7

Is there a CSS or jQuery selector that picks up a column from a table (each% of column%)?

Or, if there is no simple selector that can do this, can you do with little code in jQuery / JavaScript?

    
asked by anonymous 20.03.2014 / 20:19

2 answers

9

If none of the TDs has a colspan then you can do this using the pseudo-class :nth-child :

Example to select all third party TDs:

table td:nth-child(3) {
    /* estilo */
}

MDN Reference

Browser Support:

jQuery has no problems with this, it works on browsers supported by the library.

But in terms of CSS, it works from IE 9. You could use jQuery in IE 8 or smaller, to assign the CSS you want using this pseudo-class, or else use the following CSS that uses the pseudo -class :first-child and the proximity operator (called Adjacent sibling selectors ):

table td:first-child + td + td {
    /* estilo */
}
    
20.03.2014 / 20:23
1

@Miguel Angelo's answer will solve your problem.

However, since it is CSS3 link

You will not be able to use it in legacy browsers.

You could use a class to define a specific column eg:

<table style="width:300px">
<tr>
  <td class="Coluna1">Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>
<tr>
  <td class="Coluna1">Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>

After this you can get this column by CSS or by Jquery

CSS

.Coluna1{
//Codigo aqui
}

JQuery

$('.Coluna1)
    
20.03.2014 / 20:29