CODEWITHSUNDEEP
htmlcssinternet-explorer
twistermetal
twistermetal

Reputation: 61

using css to hide <th> elements except the first one

with CSS, i want to hide all the TH elements except the first one, i had the format like this: 

<table>
  <tbody>
    <tr>
      <th></th>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <th></th>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <th></th>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

i need to check a solution for IE8 too as i know they do not support Pseudo Elements, I am trying like this 

th:not(:first-child):display:none;

but this does not work on any browser

Upvotes: 2

Views: 2142

Answers (2)

user663031
user663031

Reputation:

first-child is not a pseudo-element, it's a pseudo-class. In any case, :not accepts only a "simple selector"; first-child does not qualify. But here you cannot use first-child anyway, since it applies to elements with a common parent.

In this case, you presumably want to hide the th not within the first table. So

th                   { display: none;  }
table:first-child th { display: block; }

This is a standard CSS idiom used in the case of "apply a value of X1 to some property for all Y, except in case Z apply value X2". In a normal programming language, one might use an if statement involving a not operator. In CSS, taking advantage of the principle of order of rules, you write this as:

Y { property: X1; }    // standard behavior comes first
Z ( property: X2; }    // exceptional behavior comes next

In your case, the "standard behavior" is to hide the th, and the "exceptional behavior" is to show it for the first one.

You may be able to use :not in such situations, but it will not always behave as you expect, especially when combined with other selectors including other :nots, not to mention the "simple selector" restriction.

Upvotes: 3

Swapnil Motewar
Swapnil Motewar

Reputation: 1088

Using jquery you can do it easily like

$( "th:not(:first)" ).css( "background", "green" );

$( "th:not(:first)" ).css( "background", "green" );

// "th:not(:first)" ).css( "display", "none" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <th>Heading</th>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
  </tbody>
</table>
<table border="1">
  <tbody>
    <tr>
      <th>Heading</th>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
  </tbody>
</table>
<table border="1">
  <tbody>
    <tr>
      <th>Heading</th>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions