2013-06-02 3 views
1

EDIT: Спасибо за помощь! Готовые таблицы здесь: http://jsfiddle.net/MnLkD/Как получить тень между границами на столе?

Я пытаюсь получить тень, чтобы появиться между ними границы на этой таблице:

http://jsfiddle.net/g2fy4/

Я предполагаю, что это не может быть возможно, но думал, я бы спросить эксперты все равно :-P. Я попытался установить границу между 2px, без границ и назначить тень для тэгов th и td, но это не сработало.

Если у кого есть какие-либо идеи, я был бы благодарен за вход :-)

#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); 
} 

ответ

0

Вы хотите добиться чего-то вроде этого: http://img856.imageshack.us/img856/8865/tableim.jpg ?

Моя единственная идея в настоящее время, чтобы установить несколько абсолютных расположенных дивы в таблице (но ячейки таблицы ширина и высота должна быть установлена), и добавить окно-тень на эти дивы ...

1

Это звучит, как вы хотите сделать это?

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> 

В принципе ответ, вы не можете сделать это случиться с TD теги в одиночку, но вы можете обернуть клетку содержимое в теге, например divs, и стиль.

4

Что вы имеете в виду? (царапины головы)

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

Все, что я сделал изменения элементов, которые получили тень от table к td и убедились, что там было расстояние между границами.

#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); 
} 

Если вы хотите получить тени на элементах td, поместите их на элементы td!

+0

Спасибо за ответ! Да, так, но мне нужны столбцы td без горизонтальных разрывов, таких как исходная таблица. Есть идеи? – Chris

+1

Отсортировано :-). Готовая таблица находится здесь: http://jsfiddle.net/MnLkD/. Спасибо за помощь! – Chris

Смежные вопросы