How do I select columns including colspans in a table?


Tags: html,css,html-table

Problem :

Assume I have a table that looks like this:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td></td>
    <td colspan="2"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td colspan="2"></td>
    <td></td>
    <td colspan="2"></td>
  </tr>
</table>

How do I select all the cells in the fourth column, including the td[colspan="2"] that spans to it with CSS?



Solution :

It's not pretty but can be done with multiple selectors: http://jsfiddle.net/r4atjtfx/1/

tr:first-child td:nth-child(4),
tr:first-child + tr td[colspan="2"] ~ td[colspan="2"],
tr:last-child td:nth-child(3) {
    color: orange;
}

But to answer your question no selector exists to target different table columns.


    CSS Howto..

    How to handle PNG image loading time in html, css

    How to Remove CSS line-through

    How to include CSS for a specific part of the page

    How to change CSS according to user Operating System

    How do I modify IE Gradient CSS to use height and a third color?

    How do I keep my footer text from appearing outside my footer

    How to use media queries in css

    How to remove the white gap between the background image and the navigation bar

    How to make my web page look Ok with IE7+? [closed]

    How do I make a Javascript alert display only once, ever? [closed]

    How to get this hover effect with just CSS

    Django Allauth - How to add custom css class to fields?

    HTML/CSS - How do I fix width:100% cutting off when the content creates a horizontal scroll bar?

    How to Tie Events to CSS

    How to change table cell colour to default on triple click html5/javascript/css

    When I try to print a page I created using jQuery Mobile, it always prints an extra blank page. How can I stop this?

    How do I keep an element scaled in CSS3 in-till mouseleave? Then on mouseleave scale the element back to it's original size

    how to apply ellipse effect in which contain space in string?

    How to get WordPress Twenty Ten theme sub-menus to expand to their contents (CSS)?

    How to remove css from DOM

    How to make the posts of a content type horizontal scrollabel?

    How do I get a video to fit in a specified area?

    How to implement multi piece page background that is behind a content background in HTML/CSS without Javascript?

    How to make styling and functioning of form elements get not to break in all browsers?

    Color not showing up in Safari but everything is working in MSIE, FF and Chrome browsers

    Unordered List Navigation Bar: How to I make some buttons go to the right of the navigation page?

    How to add-class and focus the children on keydown function

    How to disable IE11 WebBrowser control scaling

    How can i add a line-break on a costume tooltip?

    How to size images loaded from other users such that dimensions are maintained yet a max width and height are set with css? (HTML/JS/CSS)