Skip to content

Instantly share code, notes, and snippets.

@orioltf

orioltf/css_tables_polifyll.html

Last active December 11, 2015 04:58
Show Gist options
  • Save orioltf/4549135 to your computer and use it in GitHub Desktop.
Save orioltf/4549135 to your computer and use it in GitHub Desktop.
Download ZIP
#JQUERY #CSS: Using jQuery To Detect CSS-Based Table Display Capabilities. From http://www.bennadel.com/blog/1768-Using-jQuery-To-Detect-CSS-Based-Table-Display-Capabilities.htm
Raw
css_tables_polifyll.html
<!DOCTYPE HTML>
<html>
<head>
<title>
Detecting CSS-Based Table Display Support With jQuery
</title>
<style type="text/css">
div.table {
display: table ;
width: 100% ;
}
div.table-row {
display: table-row ;
}
div.table-cell {
display: table-cell ;
}
div.first-table-cell {
background-color: #E0E0E0 ;
width: 50% ;
}
div.last-table-cell {
background-color: #FFE0E0 ;
width: 50% ;
}
/* -- Fixes for non-Table support. -- */
div.table-fix {
display: block ;
}
div.table-fix div.table-row {
display: block ;
}
div.table-fix div.table-row:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
div.table-fix div.table-row { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html div.table-fix div.table-row { height:1%; }
div.table-fix div.table-row { display:block; }
div.table-fix div.table-cell {
display: block ;
float: left ;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
// Check to see if this browser supports CSS-based Table
// layout displays.
var supportsCSSTableLayout = (function( $ ){
// Create nodes with the table-based display values.
var tableLayoutTest = $(
"<div>" +
"<div style=\"display:table;\"></div>" +
"<div style=\"display:table-row;\"></div>" +
"<div style=\"display:table-cell;\"></div>" +
"</div>"
);
// Get the HTML for the above node and gather all
// "table" type displays from the markup (IE browsers
// will strip that out of the markup if they do not
// support it.
var tableMatches = tableLayoutTest.html().match(
new RegExp(
"table(-(row|cell))?",
"gi"
)
);
// Return true if all three table-based displays were
// found in the markup.
return(
(tableMatches && (tableMatches.length == 3)) ?
true : false
);
})( jQuery );
// -------------------------------------------------- //
// -------------------------------------------------- //
// When the DOM is ready to be interacted with, init.
jQuery(function( $ ){
// Output whether or not CSS table display is supported.
$( "#has_support" ).text( supportsCSSTableLayout );
// If there is no CSS-based table display support,
// then add the fix to the table elements.
if (!supportsCSSTableLayout){
$( ".table" ).addClass( "table-fix" );
}
});
</script>
</head>
<body>
<h1>Detecting CSS-Based Table Display Support With jQuery</h1>
<p>
Supports CSS Table Display:
<strong id="has_support">...</strong>
</p>
<div class="table">
<div class="table-row">
<div class="table-cell first-table-cell">
Cell 1
<br />
</div>
<div class="table-cell last-table-cell">
Cell 2
<!-- Add breaks here to grow cell. -->
<br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment