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 can I have multiply a pixel width value with LESS Css?

    How do I create a region/zone map for the web? [closed]

    How to use a Video as text background in css

    How to adjust the length of input

    jQuery .animate() sets display:none, how to avoid?

    Should be easy jQuery loop, but can't seem to figure out how to cycle through this

    how to give style to the selected option in html

    How to let Materialize use classes for dropdowns and not ID's?

    How to abstract this single case (showing text field based on selection of a drop down list) into a general function in jQuery?

    How can I use AngularJS directive to apply css style for a string?

    how to add multiple images to a css header?

    how to use CSS clip-path in IE? [closed]

    “ul li a:link, a:visited” and “ul li a, visited” how they different?

    How to implement fade-in and other effects using CSS

    How to mark search phrase in syntax highlighted markdown code?

    How can I work around IE7 being unable to style dynamic elements created via DOM api

    How do I increase the size of the text contained?

    How to position an element just off the top of the browser viewport using only css?

    How to Align CSS form

    CSS, how to put a div inside a div that is responsive?

    How can I make uneven rows for a 2-column grid with Bootstrap/css?

    How to position multiple elements on one line, if they are in an absolute element?

    How to scale the image with css

    How to stop CSS/HTML navigation menu wrapping at different resolutions?

    CSS sprite - showing part of another image when zooming

    how to apply css style only to homepage

    With html tables, using CSS, how do I get the tables next to each other?

    How do I update an div css to display an complete image when section is complete?

    How to assign speed parameter to callback functions

    How do you make something in the center of the page in CSS? [duplicate]