CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 441

How to get shadow to appear between borders on a table?

EDIT: Thanks for all the help! Finished table is here: http://jsfiddle.net/MnLkD/

I am trying to get a shadow to appear inbetween the borders on this table:

http://jsfiddle.net/g2fy4/

I'm guessing it might not be possible but thought I'd ask the experts anyway :-P . I have tried setting a border-spacing of 2px, no border, and assigning the drop shadow to the th and td tags but it didn't work.

If anyone has any ideas I would be grateful for the input :-)

#content.postagepage table {
    margin:0 auto 40px auto;
    border-spacing:0;
    -webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
    box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}

Upvotes: 1

Views: 145

Answers (3)

JayC
JayC

Reputation: 7141

What, you mean like this? (scratches head)

http://jsfiddle.net/g2fy4/2/

All I did was change the items that got shadow from table to td and made sure there was border spacing.

#content.postagepage table {
    margin:0 auto 40px auto;
    border-spacing:3px;
}
#content.postagepage td {
    -webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
    box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}

If you want shadows on the td elements, put it on the td elements!

Upvotes: 4

Chris Moschini
Chris Moschini

Reputation: 37947

It sounds like you want to do this?

http://jsfiddle.net/b9chris/sXQvp/

CSS:

div {
    width: 100%; height: 100%;
    -webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
    box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}

HTML:

<table>
<tr><td><div>Hi</div></td><td><div>Hi</div></td></tr>
<tr><td><div>Hi</div></td><td><div>Hi</div></td></tr>
</table>

Basically the answer is, you can't make this happen with TD tags alone, but you can wrap the cell contents in a tag like divs and style those instead.

Upvotes: 1

sinisake
sinisake

Reputation: 11318

Do you want to achieve something like this: http://img856.imageshack.us/img856/8865/tableim.jpg ?

My only idea currently is to set few absolute positioned divs in table (but then table cells width and heights should be set), and to add box-shadow to these divs...

Upvotes: 0

Related Questions