添加框阴影到表列（从上到下）？

我有这个简单的表，其中，如果我单击列 - 我需要让整个所选列（从上BUTTOM）的选择。添加框阴影到表列（从上到下）？

我没有颜色或html的问题，但我确实遇到了box-shadow css属性的问题。

这是它应该如何看：

enter image description here

请注意"right-shadow"和"left-shadow"（自下而上我不在乎）

但是当我试图通过JQ使它（JSBIN SAMPLE）：

$("#tblPlan td:nth-child(2)").addClass('shadow')

其中：

.shadow 
{ 
    box-shadow:0px 0px 10px black; 
}

它适用于所有的边界（因为它显然应）（包括内部）：

enter image description here

问题

我如何才能实现到一个解决方案，只有左右（底部我不在乎） - 会被遮蔽？

jsbin

来源

2014-06-30 Royi Namir

p.s.我无法将表格更改为div。 –

eeewwww ....我只是想的溶液（难看一个）的 - z索引DIV透明，这将是在柱的顶部，并且将有阴影... eeewww –

我使用''和'最初推荐'，但看起来它不支持'box-shadow'。 –

我更新了jsFiddle使用插入盒阴影带：前和：元素之后，如在this great solution所示。

我认为这是最好看的CSS-只为你的问题的解决方案，其他大多数黑客都非常圆的阴影，这看起来很奇怪。

来源

2014-06-30 16:20:57 Linus

尝试是这样的：

你的CSS类：

.shadow 
{ 
    box-shadow: 10px 0px 10px -5px black, -10px 0px 10px -5px black; 
}

给予第四paramenter负值（-5px）您指定的阴影蔓延。你可以看到这个答案类似：How can I add a box-shadow on one side of an element?

来源

2014-06-30 15:23:43 Diego

您可以使用伪元素和相对/绝对位置绘制阴影和BG颜色：http://jsbin.com/manacigi/17/edit

更新CSS：

 #tblPlan 
     { 

     table-layout: fixed; 
     width:100%; 
     border-collapse: collapse; 
     border:solid 1px lightgrey; 
      position:relative; 
      overflow:hidden; 

     } 

     #tblPlan tr:first-child td+td 
     { 
     white-space: nowrap; 
     } 



     #tblPlan td:first-child 
     { 
      padding-left:20px; 
     } 
     #tblPlan td 
     {border:solid 1px lightgrey; 

     padding:15px 5px 15px 5px; 
     } 

     #tblPlan td+ td 
     { 
     text-align: center; 
     } 




     .shadow 
     { 
      box-shadow:inset 0 0 0 100px #5FCBE5; 
      position:relative; 

     } 
.shadow:before, 
.shadow:after { 
    content:''; 
    position:absolute; 
    height:100%; 
    top:0; 
    bottom:0; 
    width:1px; 
    box-shadow:-2px 0 2px; 
} 
.shadow:before { 
    left:0; 
} 
.shadow:after { 
    right:0; 
    box-shadow:2px 0 2px; 
}

来源

2014-06-30 15:44:22

分号添加到js http://jsbin.com/manacigi/19/edit所以它在铬中工作 –

添加框阴影到表列（从上到下）？

回答

相关问题