box-shadow для строки таблицы

valyan · September 26, 2013

Здравствуйте. У меня похожая проблема

пытаюсь сделать тень для строки таблицы:


<html xmlns="[url="http://www.w3.org/1999/xhtml%22>"]http://www.w3.org/1999/xhtml">[/url]
<head>
<style>
.gradient
{
background: #fefcea; /* Для старых браузров */
background: -moz-linear-gradient(top, #f5f5f5, #d2d2d2); /* Firefox 3.6+ */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(linear, left top, left bottom,
			 color-stop(0%,#f5f5f5), color-stop(100%,#d2d2d2));
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(top,#f5f5f5, #d2d2d2);
background: -o-linear-gradient(top, #f5f5f5, #d2d2d2); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f5f5f5, #d2d2d2); /* IE10 */
background: linear-gradient(top, #f5f5f5, #d2d2d2); /* CSS3 */
-moz-box-shadow: 0px 2px 4px red;
-webkit-box-shadow: 0px 2px 4px red;
box-shadow: 0px 2px 4px red;
display: block;
}
</style>
</head>
<body>
<table width="100%" height="100%" style='border-collapse: collapse;'>
<tr align="center" height="25px" >
<td class="obj_el" colspan="7" bgcolor="#363636"><img style="position: relative; top: 4px;" src='api/Images/message_icon.png'>  текст</td>
</tr>
<tr class="gradient">
<td class="type_obj" align="center" valign="middle" id="drivers"><img src='api/Images/chat_courier_icon.png'><br/>123<div class='circle' id='circle_drivers' style='position: relative; top: -40px;left: 30px;'></div></td>
<td><div class="line-2"></div></td>
<td class="type_obj" align="center" valign="middle" id="warehouse"><img src='api/Images/chat_tk_icon.png'><br/>1234<div class='circle' id='circle_warehouse' style='position: relative; top: -40px;left: 30px;'></div></td>
<td><div class="line-2"></div></td>
<td class="type_obj" align="center" valign="middle" id="disp"><img src='api/Images/chat_disp_icon.png'><br/>3333<div class='circle' id='circle_disp' style='position: relative; top: -40px;left: 30px;'></div></td>
<td><div class="line-2"></div></td>
<td align="left" valign="middle" width="76%" style='font-family: Segoe_light; padding-left: 20px; color: #2878af; font-size: 21px;'>Имя </td>
</tr>
<tr>
<td colspan="6" bgcolor="#363636"><font style="font-size:13px; padding: 3px 0px 3px 20px;color: #D3D3D3;">454</font></td>
<td valign="middle"><div id='NameObj'></div></td>
</tr>
<tr>
<td colspan="6" bgcolor="#363636" style='padding: 0px 20px 0px 20px;'><div class='line-1'></div></td>
<td style='padding: 0px 20px 0px 20px;'><div id='one_lin' style='display: none; border-top: 1px solid #c8c8c8; height: 0px;'></div></td>
</tr>
<tr>
<td class="obj_el" colspan="6" valign="top" bgcolor="#363636" id="list_obect"></td>
<td id="mess_text" valign="top"></td>
</tr>
</table>
</body>
</html>

выходит не то, что я ожидал.

Если сделать так


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.gradient
{
background: #fefcea; /* Для старых браузров */
background: -moz-linear-gradient(top, #f5f5f5, #d2d2d2); /* Firefox 3.6+ */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(linear, left top, left bottom,
			 color-stop(0%,#f5f5f5), color-stop(100%,#d2d2d2));
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(top,#f5f5f5, #d2d2d2);
background: -o-linear-gradient(top, #f5f5f5, #d2d2d2); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f5f5f5, #d2d2d2); /* IE10 */
background: linear-gradient(top, #f5f5f5, #d2d2d2); /* CSS3 */
-moz-box-shadow: 0px 2px 4px red;
-webkit-box-shadow: 0px 2px 4px red;
box-shadow: 0px 2px 4px red;
display: block;
}
</style>
</head>
<body>
<table width='100%' height='100%' id='mes_dialog' style='border-collapse: collapse;'><tr><td colspan='2'><div id='content_mess'></div></td></tr><tr height='60px' id='tr_comments' align='center' valign='middle' class='gradient' ><td style='padding: 15px 8px 0px 15px; width: 100%;'><textarea placeholder='Введите сообщение' id='comments' rows='1' cols='80'></textarea></td>			 <td style='padding: 15px 8px 0px 15px;'><input type='image' src='api/Images/chat_enter_icon.png' id='send_mess'></td>
</tr>
</body>
</html>	
</table>

то тень добавляется. Свойство display применял разное...Можно ли как-то сделать тень в данном случае, или переделать таблицу на div?

klierik · September 26, 2013

Оформи, пожалуйста, тему соответствующе: Как правильно оформить вопрос/проблему

в сети есть такой пример: http://jsfiddle.net/jFdEY/2/

но вообще на TR повесить box-shadow не получится.

npofopr · September 26, 2013

http://css-live.ru/tricks/neprostaya-stilizaciya-strok-tablicy-i-neponyatnyj-bag-v-ie9.html

Sign In

box-shadow для строки таблицы

Question

valyan

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information