2012-01-06 52 views
0

这是一个远射,所以如果不可能,请告诉我。基本上,我砍了一个解决方案,在TD行上添加一个DIV,并将宽度设置为整行的宽度。效果非常好,但现在我得到了这个额外的colomn占用DIV的空间。我想知道是否有可能摆脱它。附上截图。是否可以在TD中拥有DIV而不占用列

enter image description here

这里是我的HTML:

<tr class="event-state-edited row_selected" eventid="7c5b1bb6-1b36-489a-0000-000000006482"> 
    <td><!--CONTROLS--><img src="includes/edit.png" style="width:25px; height:25px;" class="bt_single_event_edit"></td> 
    <td>12/12/2011 8:05:13 PM</td> 
    <td>12/12/2011 8:05:43 PM</td> 
    <td>Test MC5</td> 
    <td>00:00:00</td> 
    <td>0.5</td><td>EEEEEEEEEEEE</td> 
    <td>\Conveyors\Snapped Belt</td> 
    <td>undefined</td> 
    <td>Secondary</td> 
    <div class="table-row-overlay" style="display: inline-block; background-position-x: 221px; ">COPY</div> 
</tr> 

这里是我的CSS

.table-row-overlay{ 
    float:left; 
    border:1px solid black; 
    display:inline-block; 
    position:absolute; 
    width:100%; 
    height:48px; 
    left:-1px; 
    background-image:url('includes/overlay.png'); 
    overflow:hidden; 
    filter:alpha(opacity=20); 
    opacity:0.20; 
    display:none; 
} 
+0

请提供[jsFiddle](http://jsfiddle.net/)或我们的合作网站。 – 2012-01-06 20:16:55

+0

TR元素不允许包含DIV元素。为什么不将表格行重叠类添加到表格中所需的TR元素? – DwB 2012-01-06 20:19:09

+0

你想覆盖覆盖单元格,还是只是试图复制背景效果? – 2012-01-06 20:35:06

回答

0

不幸的是,我没有找到一种方法来使一个列不占用表中的空间。

所以我把TD移到了TD之外,摆脱了额外的列,并将DIV绝对定位在TD行的正上方。我使用jQuery来确定放置它的偏移位置。

0

这将需要在CSS一些重新造型,但我建议你加入td元素之一内的div。就目前而言,在tr中的div元素与td并排,并不真正有效。

或者可以给它自己的td(从逻辑上将它与其他人分开),并将div设置为现在显示的样子,而其父类td的样式不显示。

0

而不是图像尝试单独使用csscss3 gradients:hover或使用jQuery.addClass(),具体取决于您所需的用户体验。

相关问题