2012-01-06 56 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(),具體取決於您所需的用戶體驗。

相關問題