Hiding a in a with CSS

Question

I have to hide a td element in a tr which has 2 tds

Here is the HTML code:

In the above HTML code I need to hide the 2nd td element alone in CSS. I put the below CSS but it is hiding both the tds.

.ms-globalnavicon table tr td {
  visibility: collapse;
}

user_183181 · Answer

Options

You have several options (too many to list them all). Here are some popular ones based on your attempt:

Use the sibling operator
Use nth-of-type
Directly style (add a class/ID to the row and set display:none for that class/id)

.ms-globalnavicon table tr td+td {
  visibility: collapse;
}

.ms-globalnavicon table tr td+td {
  visibility: collapse;
}

.ms-globalnavicon table tr td:nth-of-type(2n){
   display: none;
}

.ms-globalnavicon table tr td:nth-of-type(2n) {
  display: none;
}

user_18114241 · Answer

FROM, the website MAmirHamza.com Use both lines together, like this way

.table-right-1 { 
    visibility: hidden;
    display: none;
}