Table is not properly rendering in IE9

[shahzadsiddiqui8]

Hi I am making a responsive table its working fine in firefox and chrome but its not rendering in IE9, below is my html and css code, please suggest why it is not rendering in IE9…

HTML

 <div id="no-more-tables">
            <table class="col-md-12 table-bordered table-striped table-condensed">
        		<thead>
        			<tr>
        				<th>Code</th>
        				<th>Company</th>
        				<th class="numeric">Price</th>
        				<th class="numeric">Change</th>
        				<th class="numeric">Change %</th>
        				<th class="numeric">Open</th>
        				<th class="numeric">High</th>
        				<th class="numeric">Low</th>
        				<th class="numeric">Volume</th>
        			</tr>
        		</thead>
        		<tbody>
        			<tr>
        				<td data-title="Code">AAC</td>
        				<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
        				<td data-title="Price" class="numeric">$1.38</td>
        				<td data-title="Change" class="numeric">-0.01</td>
        				<td data-title="Change %" class="numeric">-0.36%</td>
        				<td data-title="Open" class="numeric">$1.39</td>
        				<td data-title="High" class="numeric">$1.39</td>
        				<td data-title="Low" class="numeric">$1.38</td>
        				<td data-title="Volume" class="numeric">9,395</td>
        			</tr>
        			<tr>
        				<td data-title="Code">AAD</td>
        				<td data-title="Company">ARDENT LEISURE GROUP</td>
        				<td data-title="Price" class="numeric">$1.15</td>
        				<td data-title="Change" class="numeric">+0.02</td>
        				<td data-title="Change %" class="numeric">1.32%</td>
        				<td data-title="Open" class="numeric">$1.14</td>
        				<td data-title="High" class="numeric">$1.15</td>
        				<td data-title="Low" class="numeric">$1.13</td>
        				<td data-title="Volume" class="numeric">56,431</td>
        			</tr>
        		</tbody>
        	</table>
        </div>

CSS:

@media screen and (max-width:1100px) {
    
	.table-responsive{
		overflow: inherit;
	}
    /* Force table to not be like tables anymore */
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	#no-more-tables tr { border: 1px solid #ccc; }
 
	#no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	#no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	#no-more-tables td:before { content: attr(data-title); }
}

below is FireFox View:

below is IE-9 View:

[PaulOB]

IE9 and under do not honour the display:block on table-cells but you can use my trick of forcing the issue by turning the td and th elements into floats instead but with 100% width to give the block effect.

display:block;
float:left;/* ie9 and under hack */
clear:both;
width:100%;

You could add it here:

#no-more-tables th, 
#no-more-tables td      { 
display: block;
float:left;/* ie9 and under hack */
clear:both;
width:100%; 
}

See my old demo here for a working example:

If you are going to add padding to those elements then use the border-box model so that you can keep the 100% width as the floats will need 100% width.

Of course you could separate the rules into conditional comments for ie9 and under if you don’t want to bother other browsers but the code should work seamlessly anyway as long as any parent of the table is made to contain floated children.

[shahzadsiddiqui8]

Thanks so much PaulOB