CODEWITHSUNDEEP
htmlcss
Bill Software Engineer
Bill Software Engineer

Reputation: 7782

Is it possible to have DIV in TD without taking up a column

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.

enter image description here

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;
}

Upvotes: 0

Views: 171

Answers (3)

Bill Software Engineer
Bill Software Engineer

Reputation: 7782

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.

Upvotes: 1

Danferth
Danferth

Reputation: 1879

instead of an image try using css alone. css3 gradients with :hover or use jQuery to .addClass() depending on your desired user experience.

Upvotes: 0

David
David

Reputation: 218828

It'll require some re-styling in the CSS, but I'd recommend adding the div inside of one of the td elements. As it stands, a div element alongside a td in a tr isn't really valid to begin with.

Or maybe give it its own td (to logically separate it from the others) and style the div to display as it does now while styling its parent td to not display.

Upvotes: 0

Related Questions