CSS to hide all theads other than first table-CodePudding

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 >
  <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?

CodePudding user response：

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 >
  <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).

CodePudding user response：

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 >
  <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>

CodePudding user response：

I've completed the markup and added a snippet. It works as expected. In your example, there is no content in <thead>, therefore it is "hidden".

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

<div >
  <table>
    <caption>Table Caption 1</caption>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsun</td>
      </tr>
    </tbody>
  </table>
  <table>
    <caption>Table Caption 2</caption>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsun</td>
      </tr>
    </tbody>
  </table>
  <table>
    <caption>Table Caption 3</caption>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsun</td>
      </tr>
    </tbody>
  </table>
</div>