CSS to hide all theads other than first table

Question

I'm trying to hide all <thead></thead> except first table by using the following CSS rule:

@media screen {
  .container>table:not(:first-child)>thead {
    display: none !important;
  }
}

<div class="container">
  <div>Table Caption</div>
  <table>
    <thead></thead>
    <tbody></tbody>
  </table>
  <div>Table Caption</div>
  <table>
    <thead></thead>
    <tbody></tbody>
  </table>
  <div>Table Caption</div>
  <table>
    <thead></thead>
    <tbody></tbody>
  </table>
</div>

But this rule hides all <thead></thead>. Any help?

Your CSS works as you say you want it to for me in both Chrome on Windows and Firefox on Windows. Are you doing anything else? What is your context? — petern0691, Nov 26 '22 at 07:37
@petern0691 I've updated the question. This is the actual markup. — s.k.paul, Nov 26 '22 at 07:49
@s.k.paul You are missing some content in the `` so it will not show anything. If you have some content, please add it to the snippet. — F. Müller, Nov 26 '22 at 08:22
As F. Müller states, you need some content in the theads to see it working (or not) . . . — petern0691, Nov 26 '22 at 08:31
You have changed your HTML and added another element before the first table. As A Hayworth states, first-child will no longer work, you now need first-of-type. — petern0691, Nov 26 '22 at 10:27

score 0 · Answer 1 · answered Nov 26 '22 at 10:13

The first table is not the first child in the container.

You need first-of-type

.container>table:not(:first-of-type)>thead {
  display: none;
}

<div class="container">
  <div>Table Caption</div>
  <table>
    <thead>
      <tr>
        <th>thead1</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <div>Table Caption</div>
  <table>
    <thead>
      <tr>
        <th>thead2</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <div>Table Caption</div>
  <table>
    <thead>
      <tr>
        <th>thead3</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

Note - I have put in fuller mark up (you need tr and th elements in the thead to see the content selected correctly).

score 0 · Accepted Answer · answered Nov 26 '22 at 16:14

You can use :not & :first-of-type Pseudo-classes on the table and the select it's child thead like below example. This will apply the CSS to all tables' thead except the first.

@media screen {
  .container>:not(table:first-of-type)>thead {
    display: none;
  }
}

<div class="container">
  <div>Table Caption</div>
  <table>
    <thead>
      <tr>
        <td>xyz-head</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>xyz-body</td>
      </tr>
    </tbody>
  </table>
  <div>Table Caption</div>
  <table>
    <thead>
      <tr>
        <td>zxc-head</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>zxc-body</td>
      </tr>
    </tbody>
  </table>
  <div>Table Caption</div>
  <table>
    <thead>
      <tr>
        <td>esd-head</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>esd-body</td>
      </tr>
    </tbody>
  </table>
</div>

CSS to hide all theads other than first table

2 Answers2