Ryan Mathieu Ryan Mathieu - 1 month ago 5
CSS Question

How can I make css of an overflowing div in a table cell important?

I am a newbie to css.
I have two td in a row of which first has overflow visible. The contents in the first div are overlapping with the second td as in the example below. I wish to make the div css properties like cursor: pointer over the second td. Thus, the div css properties should be on top of the second td.
Please help me with this.

https://jsfiddle.net/jt00uk3e/

Thanks.



table {
width: 0px;
table-layout: fixed;
}

td {
width:50px;
height:50px;
overflow: visible;
}

#td1 {
background-color: red;
}

#td2 {
background-color: green;
}

#div2 {
width: 200px;
height: 20px;
background-color: blue;
cursor: pointer;
}

<table>
<tr>
<td id="td2"><div id="div2"></div></td>
<td id="td1"></td>
</tr>
</table>




Answer

try this:

table {
    width: 0px;
    table-layout: fixed;
}

td {
    width:50px;
    height:50px;
    overflow: visible;
}

#td1 {
  
    background-color: red;
}

#td2 {
    background-color: green;
}

#div2 {
  position:relative;
  z-index:1;
    width: 200px;
    height: 20px;
    background-color: blue;
    cursor: pointer;
}
<table>
    <tr>
        <td id="td2"><div id="div2"></div></td>
        <td id="td1"></td>
    </tr>
</table>