Ie9 + CSS: Problem with Fixed Header Table

Pure css fixed header table example broken in IE9

It looks like a common issue.
This question is related to your issue: IE9 + css : problem with fixed header table

IE9 + css : problem with fixed header table

This is the rule that causes the trouble in IE. Live example: http://jsfiddle.net/JpRQh/12/

html>body tbody.scrollContent {
margin-top: 24px;
padding-top: 8px;
display: block;
height: 400px; /* If you delete this rule you will see the table rows return to their normal size */
overflow: auto;
width: 100%
}

Styling a scrolling tbody and fixed headers etc. tends to cause a lot of issues with cross-browser compatibility. You might look at this link about cross-browser scrolling tbody.

This however seems to be the best looking cross-browser solution. You will need to inspect the CSS.

Issue to scroll tbody on IE 9 (tbody's height = height-line)

I have slightly tried to fix it. Hope it gives some idea

HTML

<div class="wrap">
<div class="inner">
<table>
<thead><tr>
<th><p>Problem</p></th>
<th><p>Solution</p></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>​

CSS

p {margin:0 0 1em}
table p {margin :0}
.wrap {
margin:50px 0 0 2%;
float:left;
position:relative;
height:200px;
overflow:hidden;
padding:25px 0 0;
border:1px solid #000;
width:150px
}
.inner {
padding:0 ;
height:200px;
overflow:auto;
}
table { margin:0 0 0 -1px; border-collapse:collapse; width:130px}
td {
padding:5px;
border:1px solid #000;
text-align:center;
}
thead th {
font-weight:bold;
text-align:center;
border:1px solid #000;
padding:0 ;
color:#000;
}
thead th {border:none;}
thead tr p { position:absolute; top:0; }
.last { padding-right:15px!important; }​

Demo http://jsfiddle.net/nyCKE/272/

IE 9 and above behaves differently to html table element

First of all, the markup violates the HTML table model; if you try to validate the code snippet using HTML5 doctype (and the missing </table> added), the validator will report the error “Table column 4 established by element col has no cells beginning in it.”

Second, you are setting column widths in pixels and the total table width as 100%. This constitutes a request that cannot be fulfilled except in a very special case where the available width happens to coincide with the sum of the pixel widths plus borders, border spacing, and cell spacing. It’s no wonder that browsers react differently to this.

Thus, you need to specify the widths consistently. Either remove the setting of 100% width, or remove at least one of the column width settings. You might still have a problem (browsers may react differently even to this), and table-layout: fixed might not help (or might introduce new problems), but then there would a new, relatively well-defined problem.

HTML table with fixed header/columns - css solution - not working in Firefox

Since, the problem is only in firefox, I guess we can cheat a little bit and use CSS transforms with the prefix -moz and other browsers will just ignore it. So something like

jQuery('.valuation td[column="A"],.valuation td[column="B"]').css({
'left': _left,
'-moz-transform': "translate3d(" + _left + "px,0px,0)"
});

jQuery('.valuation td[row="1"],.valuation td[row="3"]').css({
'top': _top,
'-moz-transform': "translate3d(0px," + _top + "px,0)"
});

//because there's only only one css property, row will overwrite column above.
//so the code below selects the case where it has both translateX and translate Y
jQuery('.valuation td[row="1"],.valuation td[row="3"]')
.filter('.valuation td[column="A"],.valuation td[column="B"]')
.css('-moz-transform', "translate3d(" + _left + "px," + _top + "px,0)");

Example

Table columns do not align with their fixed headers in IE

how about removing width:100% on #tableqanda_onthefly



Related Topics



Leave a reply



Submit