orioltf
1/16/2013 - 5:46 PM

#JQUERY #CSS: Using jQuery To Detect CSS-Based Table Display Capabilities. From http://www.bennadel.com/blog/1768-Using-jQuery-To-Detect-CSS

#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

css_tables_polifyll.html
content_copyfile_download
<!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>