This makes no sense to me, but then again, I'm not anywhere close to a CSS expert (probably not even a good novice).
I'm using relative
/absolute
because I'm using dynamically paginated tables from huge tables. I do this to allow the user to rapidly thumb through data without overloading the client.
As you can see, the table-row
expands 100%, but the table-cell
s don't obey table-layout:fixed
. Need the table-cell
s to expand to fill all available table-row
space.
(Side note, the border-collapse: collapse
doesn't work either.)
Please help. Many thanks in advance!
HTML
<div class="gridTable">
<div class="gridRow">
<div class="gridCell">a</div>
<div class="gridCell">JKL;</div>
<div class="gridCell">Jb</div>
</div>
</div>
CSS
.gridTable{
display:table;
table-layout:fixed;
position:relative;
border-collapse: collapse;
}
.gridHeaderRow{
top:0px;
}
.gridRow, .gridHeaderRow{
display:table-row;
position:absolute;
}
.gridCell{
display:table-cell;
}
.gridTable, .gridRow, .gridHeaderRow{
width:100%;
}
.gridTable, .gridTable *{
border-collapse:collapse;
}
.gridTable div{
border-color:black;
border-width:1px;
border-style:solid;
}
I removed the position absolute from the row rule and it worked for me (chrome, firefox)
.gridRow, .gridHeaderRow{
display:table-row;
}
In case you want to have a fixed header, you could separate the header like this:
<div class="gridTableBox">
<div class="gridTable gridHeaderTable">
<div class="gridRow">
<div class="gridCell">T1</div>
<div class="gridCell">T2</div>
<div class="gridCell">T3</div>
</div>
</div>
<div class="gridTable gridBody">
<div class="gridRow">
<div class="gridCell">a</div>
<div class="gridCell">JKL;</div>
<div class="gridCell">Jb</div>
</div>
</div>
</div>
Now you can giv the gridHeaderTable div a absolute positiion without breaking the table-layout.
Updated fiddle is here.