是否可以在不占用色谱柱的情况下在TD中使用DIV

Question

这是一个很长的镜头，所以如果不可能，请告诉我。基本上，我通过在每一个中添加DIV并将宽度设置为整行的宽度来破解在TD行上覆盖图像的解决方案。效果非常好，但是现在我从DIV那里得到了额外的colomn空间。我想知道是否有可能摆脱它。附上截图。

这是我的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;
}

Answer 1

它需要在CSS中进行一些重新设计，但我建议在其中一个div元素中添加td。就目前而言，div中的td元素与tr中的td元素并不是真正有效的。

或者也许给它自己的div（以逻辑方式将其与其他人区分开来）并设置td的样式，使其显示为现在的样式，同时将其父{{1}}样式设置为不显示。

Answer 2

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

Answer 3

不幸的是，我没有办法让列不占用表中的空间。

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