table-layout:fixed not expanding table-cells inside absolute 100% width table-row (elements not collapsing either)

Question

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-cells don't obey table-layout:fixed. Need the table-cells 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;
}

axel.michel · Accepted Answer · 2013-01-31T05:33:44.263

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.

Maybe you could separate the "header" and "body" like in that updated fiddle: http://jsfiddle.net/7SJ4V/1/ — axel.michel, Jan 30 '13 at 20:18

table-layout:fixed not expanding table-cells inside absolute 100% width table-row (elements not collapsing either)

1 Answers1