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
CSS Text Padding Difference Firefox Vs Chrome and Others
Vertically Aligning Block Element to Image
How to Use Antdesign with Tailwindcss Together in a React Project
CSS: Is Transition: Left/Top Gpu Accelerated
CSS Background Gradient Validation
Media Queries Running Weird Because of Non-Integer Width
Internet Explorer 11 Wobbly CSS3 Animation
How to Create a Partial Border(With a Hole)
When Printing Page Table Rows/Cells Gets Split on Page Break
Fade Background Images with CSS3
How Does Bootstrap Switch from One Class to The Next
Background-Size Transition on Hover Causes Chrome to "Shake" Background Image
What Is Position:Relative Useful For
Why Is "Border-Color" Overridden by "Color"
How to Make a Full-Width Jumbotron
How to Make Rotated Elements in a Flexbox Fixed to The Right Side of a Page