Html Question posted in
Some basic documentation can be found here.

Html – How to select table rows that are simultaneously even and displayed?

I have an HTML table with odd rows colored gray.

Some rows are hidden with <tr style="display: none"> and that creates the possibility for 2 consecutively displayed rows to be of the same color, as seen in the snipped below:

.table thead th{
   background: #f6f6f6;
}

.table>tbody>tr:nth-of-type(even)>td {
  background: #f6f6f6;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr style="display: none">
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

That means that I need a way to select all rows that are odd and do not have style="display: none".

How can I achieve this result?

Tags:

2

Answers


  1. 0

    This is impossible with CSS only. CSS works with the DOM structure and not with the elements displayed. So you will need JS to write this logic.

    You can loop each element and keep track of the visible rows.

    document.addEventListener('DOMContentLoaded', function() {
  const rows = document.querySelectorAll('#myTable tbody tr');
  let visibleRowCount = 0;

  rows.forEach(row => {
    // Check if the row is visible (not hidden)
    if (row.style.display !== 'none') {
      if (visibleRowCount % 2 === 1) {
        row.style.backgroundColor = 'red'; // Used red background for visibility
      } else {
        row.style.backgroundColor = ''; // Default for even visible rows (or you can set a different color)
      }
      visibleRowCount++;
    }
  });
});
    <table class="table" id="myTable">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr style="display: none">
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Tom</td>
        <td>Hanks</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
    Login or Signup to reply.
  2. 0

    Using the new :nth-child(An + B of S) syntax. In your case

    tr:nth-child(even of :not([style*="none"]))

    Demo:

    .table thead th{
   background: #f6f6f6;
}

.table > tbody > tr:nth-child(even of :not([style*="none"])) > td {
  background: #f6f6f6;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr style="display: none">
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr style="display: none">
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search