Question

This is a long shot, so if it’s not possible, let me know. Basically, I hacked up a solution to have image overlay on TD row by adding a DIV in each of them and have the width set to the width of the entire row. The effect was really good, but now I got this extra colomn taking up space from the DIV. I was wondering if it’s possible to get rid of it. Screenshot attached.

Here is my 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>

Here is my 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

Unfortunately, I did not find a way to make a column not take up space in a table.

So I moved the DIV outside of TD, get rid of the extra column and just positioned the DIV absolutely to be directly over the TD row. I use jQuery to determine the offset position to place it.