JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<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>
 

</html>

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 ;
			}

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" );
 
			}
 
		});