Box тени с помощью CSS

Я пытаюсь создать таблицу, как на следующем рисунке:Box тени с помощью CSS

Sample Table

Я также создал таблицу, как выше, за исключением стиля, как это выше. мой стол.

My Table

Это то, что мой CSS:

.table thead th { 
    vertical-align: middle; 
    background-color: #FFFFFF; 
    border-bottom: thin; 
    border-top: thick; 
    border-bottom-width: 4px; 
    width:300px; 
    height:30px; 
    background-color:white; 
    box-shadow: 2px 2px 5px grey; 
    border-bottom : thin; 
    border-top:thick; 
} 
.table th { 
    font-weight: bold; 
    cursor: pointer 
    width:100%; 
    height:40px; 
    background-color:#FFFFFF; 
    box-shadow: 0 0 5px grey; 
    border-bottom: thin; 
    border-top:thick; 
    vertical-align: middle; 
    border: 1px solid #DDD 

} 
.table th,.table td { 
    height: 20px; 
    max-width: 250px; 
    padding: 1px 5px 2px 10px; 
    overflow: hidden; 
    line-height: 20px; 
    text-align: left; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    vertical-align: middle; 
    border: 1px solid #DDD 
}

Результат не то, что я ищу. Я не могу дать вам код HTML таблицы, поскольку он генерируется во время выполнения с помощью backgrid.js с backbone.marionette.js

UPDATE:

this is the CSS 



box-shadow: 
     inset 0px 11px 8px -10px #CCC, 
     inset 0px -11px 8px -10px #CCC;

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

Как это сделать?

Пожалуйста, помогите мне сделать это.

источник

2013-06-17 Java Questions

Добавить перед таблицей следующий элемент:

<div id="fade"></div>

И в файле CSS:

#fade { 
height: 22px; 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,255)), color-stop(50%,rgba(247,247,247,247)), color-stop(51%,rgba(245,245,245,245)), color-stop(100%,rgba(243,243,243,243))); 
background: -webkit-linear-gradient(top, rgba(255,255,255,255) 0%,rgba(247,247,247,247) 50%,rgba(245,245,245,245) 51%,rgba(243,243,243,243) 100%); 
background: -o-linear-gradient(top, rgba(255,255,255,255) 0%,rgba(247,247,247,247) 50%,rgba(245,245,245,245) 51%,rgba(243,243,243,243) 100%); 
background: linear-gradient(to bottom, rgba(255,255,255,255) 0%,rgba(247,247,247,247) 50%,rgba(245,245,245,245) 51%,rgba(243,243,243,243) 100%); 
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#00ffffff', EndColorStr='#00f3f3f3', GradientType=1); 
}

(изменение в цветах вы хотите и т.д.)

источник

2013-06-17 04:11:28 alfasin

Да, я получил его. Обновлен вопрос с ответом, но я не могу удалить строку между td. –

У вас есть граница: 1px solid # DDD, когда вам не нужна граница ... try: 'border-collapse: collapse' – alfasin

Box тени с помощью CSS

ответ

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