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

Can I show the content of TD on top? – Html

I show a table, which shall represent the fretboard of a guitar.

When the class "selected" is applied, a yellow dot is printed on the cell.
When the cell is hovered over, the text of the cell becomes visible (=change of color)
If both classes are applied, the dot covers the text. I would like to see the text over the dot. How can this be done?

Here is my sample code:

table {
    background: black;
}
td {
    position: relative;
    width: 40;
    text-align: center;
}
td.selected::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 15%;
    background: yellow;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    z-index: 1;    
}

td.show {       
    color: red;     
}
<table>
    <tr>
        <td class="show selected">A</td>
    </tr>
</table>
Tags:

2

Answers


  1. 0

    The simplest solution would be to wrap the text within the table cell in another element. You can then target this element and give it a z-index greater than the table cell’s ::before element.

    For example you could wrap it in a <span> element and then target td > span in your CSS to change the z-index.

    table {
    background: black;
}
td {
    position: relative;
    width: 40;
    text-align: center;
}
td > span {
    position: relative;
    z-index: 10;
}
td.selected::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 15%;
    background: yellow;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    z-index: 1;    
}

td.show {       
    color: red;     
}
    <table>
    <tr>
        <td class="show selected"><span>A</span></td>
    </tr>
</table>
    Login or Signup to reply.
  2. 0

    A negative z-index to the yellow circle and any value of z-index to the td element

    Related: Why can't an element with a z-index value cover its child?

    table {
  background: black;
}

td {
  position: relative;
  z-index: 0;
  width: 40;
  text-align: center;
}

td.selected::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 15%;
  background: yellow;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  z-index: -1;
}

td.show {
  color: red;
}
    <table>
  <tr>
    <td class="show selected">A</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search