Question

In a web page, I have several overlapping html tables (set by using css style position:absolute). In the cell of one of these tables, there is a div element defined, with a click event on it (using jquery).

Here is the problem : if a div element is covered by an empty cell of another overlapping table, the div element wont receive click events anymore. One of the conditions to make this happened is that the covered div have to be set in DOM structure before the covering table.

See this jsfiddle for a better example. As you can see, red element dont receive click events anymore (because covered by the top empty cell of table containing blue element).

I know it sounds strange to have a page like this, but the reason is that in the real application these tables are ui-draggable (thus they can overlap), and the table structure is used to display small organizational charts).

Notes :

I cannot just exchange tables position in DOM or add a z-index on one of the tables to solve the issue, because as said earlier the tables are draggable (using jquery-ui) thus user can change the situation (blue can overlap red or red can overlap blue).

Answer 1

The only way to do this with CSS, without modifying HTML, is to set pointer-events:none; to the overlapping table, and then pointer-events: all; to the specific TD that is blue.

See this fiddle.