Valkyriee Valkyriee - 7 days ago 6
CSS Question

clearing text from cells in table for every even td

this issue has driven me mad, I've tried numbers of approaches using jquery and CSS but honestly nothing good came out of it, basically i have this following table:

<table id="mainTable">
<thead>
<tr>
<th>Arrival Hours</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>19:30<span></td>
<td>Mike</td>
</tr>
<tr>
<td><span>20:00<span></td>
<td>eric</td>
</tr>
<tr>
<td><span>20:30<span></td>
<td>jonas</td>
</tr>
</tbody>
</table>


i need the hide the even spans basically here which is
20:00
, table above is an example, the table that i am working with is made by data dynamically, so i thought maybe this works made a class like below:

.scale-draft:nth-child(2n){
display: none !important;
}


but it did not work, tried this script as well:

$(document).ready(function () {
$('#mainTable tbody tr td:nth-child(2n)').css('visibility','hidden');
});


yet another failure, i am bit confused at the moment, can you help me out?

Answer

I'd suggest:

tr:nth-child(even) td span {
  display: none;
}
<table id="mainTable">
  <thead>
    <tr>
      <th>Arrival Hours</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>19:30</span>
      </td>
      <td>Mike</td>
    </tr>
    <tr>
      <td><span>20:00</span>
      </td>
      <td>eric</td>
    </tr>
    <tr>
      <td><span>20:30</span>
      </td>
      <td>jonas</td>
    </tr>
  </tbody>
</table>

The reason your jQuery selector didn't retrieve the elements you seem to want to collect is because:

#mainTable tbody tr td:nth-child(2n)

:nth-child() selects an element based on its position within its parent, rather than its position with the ancestor <table>, or <tbody>, element.

My suggested approach selects the even <tr> rows within the <tbody> element, and then styles the <span> elements within the <td> elements found within those <tr> elements.

Incidentally, your posted HTML had some errors – corrected in this answer – none of your <span> elements were closed. This didn't, in this case, affect the problem, but it remains invalid HTML:

Tag omission in text/html: Neither [the opening or closing] tag is omissible

https://www.w3.org/TR/html5/text-level-semantics.html#the-span-element

The problem with invalid HTML is that the browser will try to 'rescue' it, making it valid, when constructing the DOM which is often implementation-specific, so each browser may correct the DOM differently, leading to cross-browser issues with JavaScript and CSS.

Further, it's worth noting that the above solution will hide all <span> elements in the even rows, if you wish to hide the <span> elements in only the first cell, you may wish to amend the selector to:

tr:nth-child(even) td:first-child span {
  display: none;
}

tr:nth-child(even) td:first-child span {
  display: none;
}
<table id="mainTable">
  <thead>
    <tr>
      <th>Arrival Hours</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>19:30</span>
      </td>
      <td>Mike</td>
    </tr>
    <tr>
      <td><span>20:00</span>
      </td>
      <td>eric</td>
    </tr>
    <tr>
      <td><span>20:30</span>
      </td>
      <td>jonas</td>
    </tr>
  </tbody>
</table>

Comments