[英]Add box-shadow to table column (top to bottom)?
I have this simple table where if I click on a column - I need to make the whole chosen column ( from top to buttom ) as selected. 我有这个简单的表格,如果我点击一列 - 我需要选择整个选定的列(从顶部到按钮)。
I don't have a problem with colors or html , but I do have a problem with the box-shadow
css property. 我没有颜色或HTML的问题,但我确实遇到了
box-shadow
css属性的问题。
This is how it should look : 它应该是这样的:
Please notice "right-shadow"
and "left-shadow"
(bottom- I don't care) 请注意
"right-shadow"
和"left-shadow"
(底部 - 我不在乎)
But When I tried to make it ( JSBIN SAMPLE ) via JQ : 但是当我试图通过JQ制作它( JSBIN SAMPLE )时:
$("#tblPlan td:nth-child(2)").addClass('shadow')
Where : 地点:
.shadow
{
box-shadow:0px 0px 10px black;
}
It applies it to all borders ( As it should obviously ) (including inside ): 它适用于所有边界( 显然应该 )(包括内部):
Question 题
How can I achieve to a solution where only left and right ( bottom I don't care) - will be shadowed ? 我怎样才能实现只有左右(底部我不在乎)的解决方案?
I updated the jsFiddle to use a inset-box-shadow with :before and :after elements, as shown in this great solution . 我更新了jsFiddle以使用带有:before和:after元素的inset-box-shadow,如这个伟大的解决方案所示。
I think it's the best looking css-only solution for your problem, most other hacks have very round shadows, which looks odd. 我认为这是针对您的问题的最佳css解决方案,大多数其他黑客都有非常圆的阴影,看起来很奇怪。
Try something like this: 尝试这样的事情:
Your css class: 你的css课程:
.shadow
{
box-shadow: 10px 0px 10px -5px black, -10px 0px 10px -5px black;
}
Giving a negative value in the fourth paramenter (-5px) you indicate the shadow spread. 在第四个参数(-5px)中给出负值表示阴影扩散。 You can see something similar in this answer: How can I add a box-shadow on one side of an element?
您可以在此答案中看到类似的内容: 如何在元素的一侧添加框阴影?
You may use pseudo element and relative/absolute position to draw shadow and bg colors: http://jsbin.com/manacigi/17/edit 您可以使用伪元素和相对/绝对位置来绘制阴影和bg颜色: http : //jsbin.com/manacigi/17/edit
Updated css: 更新了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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.