How to select non-header cells with css


Tags: html,css

Problem :

Given a table like the one below that includes rowspan cells for some row headers, how can I select all of the "row content" cells using only css without changing the HTML markup?

The table is generated such that the rowspan header cells could be on different rows or possibly no rowspan at all, so the css can't be hardcoded to specific row numbers.

Is this possible with only css?

    table {
      border-collapse: collapse;
    }
    td,
    th {
      border: 1px solid black;
    }
<table>
  <tbody>
    <tr>
      <th>Column Header 1</th>
      <th>Column Header 2</th>
      <th>Column Header 3</th>
      <th>Column Header 4</th>
    </tr>
    <tr>
      <td>Row Header 1</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td rowspan="2">Row Header 2</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Header 4</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td rowspan="2">Row Header 5</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Header 6</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
  </tbody>
</table>



Solution :

Rather than looking at the individual cells, trying to find a consistency between the content cells that would allow you to select only them or a consistency between the header cells that would allow you to select all but them, we should instead look at the entire rows because, when we do so, it is immediately apparent that all the rows containing header cells have a total of 4 cells, while those that don't only have 3.

Armed with that knowledge, we can target the content cells only by combining the negation and :nth-last-child pseudo-classes to select every cell bar the 4th last one in each row, like so:

td:not(:nth-last-child(4)){}

    CSS Howto..

    How to draw a guitar string using css?

    In javascript, how to get a class name from a td cell?

    how to make 100% buttons with fixed pixel space

    How to show transition of an element that is expanding over nearby content?

    How do I detect that facebook app is loading page to change CSS?

    How does chrome extend the search window beyond the browser window

    How can i achieve this style in Html/Css?

    CSS how to target element beside my current element?

    How to apply CSS3 rendering for optimal performance

    How to fix css and jQuery slide show? [closed]

    How do I put a clear button inside my HTML text input box like the iPhone does?

    Any Idea how this web site acheives a fluid/liquid layout [closed]

    how to i target a another div with jquery or css

    How to add / remove html elements and content based on the browsing device?

    How do i create custom grid class in Bootstrap for lg as well as xs screen size?

    How can I center-align text with uneven icons either side?

    How can I stop an CSS animation from interfering with a CSS transform transition?

    How to remove spacing around in CSS? [duplicate]

    How to use calc in CSS for mozilla firefox without position absolute

    How to create responsive text on top of an image?

    How can I give a child element of one parent a higher z-index than another parent?

    How to put a space in front of a next line [closed]

    How to add a class to only one div on click?

    How can a site Use Javascript and NOT display any structural HTML in the browser?

    How can I make list item spacing more acceptable in html/css email for all viewers?

    How to replace flex in this layout?

    How to make text appear when input box is active

    how to remove space in TR and TD

    How to make arc-in animation on a website - CSS or JavaScript?

    How to make div size bigger?