Add styles to every table with the exception of a single one

Question

Add styles to every table with the exception of a single one

Is there a way to avoid applying certain styles to a table when the screen size is small without having to introduce new CSS properties?

I want to exclude specific tables from inheriting certain styles that are applied globally.

Any suggestions on how I can target all tables except for one in particular? Maybe using a unique identifier?

Thank you in advance

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0px;
}   
td,
th {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
  font-size: 15px;
}

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th> 
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>James</td>
      <td>Matman</td>
      <td>Chief Sandwich Eater</td> 
    </tr>
    <tr>
      <td>Andor</td>
      <td>Nagy</td>
      <td>Designer</td>  
    </tr>
    <tr>
      <td>Tamas</td>
      <td>Biro</td>
      <td>Game Tester</td> 
    </tr> 
  </tbody>
</table>

css css-selectors

Answer 1

Answer №1

If you're looking to hide specific elements, the :not selector is a handy tool.

div:not(.main){
  display:none;
}

<div>A</div>
<div class="main">B</div>
<div>C</div>

For instance, let's say you have 3 tables and only want to show one thead :

table {
  border: 1px solid black;
}

table:not(.main) thead {
  display: none;
}

<table>
  <thead>
    <tr>
      <th>A</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>

<table class="main">
  <thead>
    <tr>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
  </tbody>
</table>

To target the thead specifically and add a class if needed, try using thead:not(.main)

Answer 2

If you're looking to hide specific elements, the :not selector is a handy tool.

div:not(.main){
  display:none;
}

<div>A</div>
<div class="main">B</div>
<div>C</div>

For instance, let's say you have 3 tables and only want to show one thead :

table {
  border: 1px solid black;
}

table:not(.main) thead {
  display: none;
}

<table>
  <thead>
    <tr>
      <th>A</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>

<table class="main">
  <thead>
    <tr>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
  </tbody>
</table>

To target the thead specifically and add a class if needed, try using thead:not(.main)

Add styles to every table with the exception of a single one

Answer №1

Similar questions

Place a lone div at the bottom of a row containing divs with varying heights

Creating a Responsive New Row for Grid Cells in CSS Grid

Center the text within a span element in an inline-block container

"Adjusting the width of columns in a Datatable

Excessive greed in 2 column layout is causing left alignment issues

A customizable and adaptable Tetris-inspired CSS design perfect for any screen size

Centered div's overflow remains visible

Modifying Blocks in Prestashop: A Step-by-Step Guide

Utilizing jQuery to delete items once their corresponding checkboxes are checked

Building a stable sidebar design using Bootstrap 4 - A step-by-step guide

The bug in Polymer 1.0 where a custom element is causing issues when clicking under the toolbar

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

Ways of distinguishing the variance between vertical align: -0.125em and vertical align: middle explained

include a button next to the input field

What are some tips for customizing the NavBar Bootstrap 4 Layout to fit a unique design?

Divs placed side by side are displaying a 1px gap in Safari, however, this issue is

Overflow-y modifies the text color

Multiple instances of jquery click event firing when utilizing class selector

Add flair to the ButtonBase element within a Tab component

Adaptive Video Backdrops