I am trying to create a table using div elements styled with table CSS. One of the rows contains an absolutely positioned div, but setting position:relative; on the row element doesn't work as expected.
Here is my table layout without attempting to lock the row.
View table without locked row on jsfiddle
When I set the row locker div to display:block, it breaks out of the table row completely.
(See code below for reference)
Setting the divRow class to display:block instead of display:table-row puts the row blocker div where I want it, but it causes all columns to shift left due to losing the table-row functionality.
View table with divRow set to block on jsfiddle
Below is the code I have been using to experiment with this issue:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.divTable{
display:table;
width:auto;
position: relative;
}
.divRow{
display:table-row;
width:auto;
clear:both;
position: relative;
overflow: hidden;
}
.divCell{
display:table-cell;
padding: 3px;
vertical-align: top;
position: relative;
}
.locked_row
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="main_content">
[Table content here]
</div>
</body>
</html>