CODEWITHSUNDEEP
htmlcssoverflow
Verim
Verim

Reputation: 1125

Box-Shadow if table cell overflows

I'm searching a solution for my Problem: I have a table, with cells which hide to large content until you hover them (overflow: hidden).

Now I want to add a shadow to the bottom side of an cell if there is some overflow in that cell (content is bigger than cell).

I prefer to solve the problem with pure css - if there is any way.

Here an example how my table looks like - the "much much text" cell should have bottom shadow, but the "less text" not.
http://fiddle.jshell.net/x1f86nxr/1/


Edit:
I want to detect automatic what cells are overflowing and add there the shadow - manual adding is easy ;)

Upvotes: 1

Views: 525

Answers (1)

Luís P. A.
Luís P. A.

Reputation: 9739

Just try this:

table tr:first-child td:nth-child(4){
    box-shadow: 0 -10px 5px rgba(0,0,0,0.1) inset;
}

Note: If you want to set dynamic, just add a class to the td, and use this css

table tr td.MyClass{
        box-shadow: 0 -10px 5px rgba(0,0,0,0.1) inset;
    }

DEMO HERE

Upvotes: 1

Related Questions