JSFiddle - React, Tailwind, and code Playground
by dixalex
HTML
<table class='dcmTable' cellspacing="0" border="1" style="border: none; border-collapse: collapse; font-size: 14px; font-family: arial, sans-serif;">
<tbody>
<tr><td style="padding: 4px; border: none;"></td><td style="padding: 4px; border: none;"></td><td colspan="3" style="padding: 4px; border-style: solid; border-width: 1px 2px; border-color: rgb(47, 117, 181) rgb(48, 84, 150) black; font-weight: bold; text-align: center; background-color: rgb(185, 209, 237);">FREE VERSIONS</td><td colspan="4" style="padding: 4px; border-style: solid; border-width: 1px; border-color: rgb(47, 117, 181) rgb(47, 117, 181) black; font-weight: bold; text-align: center; background-color: rgb(185, 209, 237);">PAID VERSIONS</td></tr>
<tr><td style="padding: 4px; border: none;"></td><td style="padding: 4px; border-style: solid; border-width: 1px 2px 1px 1px; border-color: rgb(47, 117, 181) black rgb(47, 117, 181) rgb(47, 117, 181); font-size: 20px; font-family: arial, sans-serif; background-color: rgb(185, 209, 237);">Features</td><td style="padding: 4px; border: 1px solid rgb(47, 117, 181); font-weight: bold; text-align: center; background-color: rgb(185, 209, 237);">GoToMeeting Free</td><td style="padding: 4px; border: 1px solid rgb(47, 117, 181); font-weight: bold; text-align: center; background-color: rgb(185, 209, 237);">WebEx<br> Free</td><td style="padding: 4px; border-style: solid; border-width: 1px 2px 1px 1px; border-color: rgb(47, 117, 181) black rgb(47, 117, 181) rgb(47, 117, 181); font-weight: bold; text-align: center; background-color: rgb(185, 209, 237);">Skype for Business<br> Free</td><td style="padding: 4px; border: 1px solid rgb(47, 117, 181); font-weight: bold; text-align: center; background-color: rgb(185, 209, 237);">Skype for Business<br> Paid</td><td style="padding: 4px; border: 1px solid rgb(47, 117, 181); font-weight: bold; text-align: center; background-color: rgb(185, 209, 237);">Google Hangouts <br/>Paid</td><td...
CSS
table {
}
td {
}
JavaScript
//S2230402 DCM Table Setup 07-30-2015
//codebeautify.org Excel-HTML
//http://stackoverflow.com/questions/14061123/jquery-selector-to-grab-cells-in-the-same-column
var $mainTable = $('table.dcmTable');
var $tableCells = $('td');
var $rowOne = $('table.dcmTable tbody tr:eq(0) td');
var $rowTwo = $('table.dcmTable tbody tr:eq(1) td');
var $featureHeader = $("table.dcmTable tbody tr td:contains('Features')");
var $firstColumn = $('table.dcmTable tbody tr:eq(2) td:eq(0), table tbody tr:eq(8) td:eq(0), table tbody tr:eq(14) td:eq(0)');
var $firstColumnExclude = $('table.dcmTable tbody tr:eq(2) td:eq(0), table tbody tr:eq(8) td:eq(0), table tbody tr:eq(14) td:eq(0)').next().next().next();
var $smallerText = $("table.dcmTable tbody tr td:contains('Same password for all users'), td:contains('Plugin')");
var $bullets = $('table.dcmTable tbody tr td span');
var $freeRow = $("table tbody tr:eq(14)").find('td');
var $noDial = $("table.dcmTable tbody tr td:contains('no dial in option')");
var $blankThree = $('table.dcmTable tbody tr:eq(0) td, table tbody tr:eq(1) td');
var $skypeFreeHeader = $("tr:eq(1) td:eq(4)");
var $skypeFreeCol = function skypeFreeCol() {
$('table.dcmTable tbody tr').each(function() {
$(this).find('td:eq(3)').not($rowOne).not($rowTwo).not($firstColumnExclude).css("border-right", "solid 2px black");
});
};
var $freeVersionHeader = $("table.dcmTable tbody tr td:contains('FREE VERSIONS')");
var $coreMeetingEven = $("table.dcmTable tbody tr td:contains('Meeting Video Quality'), td:contains('In-Meeting Collaboration & IM'), td:contains('Join from Any Device'), td:contains('Record Audio and Video in Meetings'), td:contains('Password-Protected Meetings'), td:contains('In-Meeting Polling')").closest('tr:even').find('td');
var $coreMeetingOdd = $("table.dcmTable tbody tr td:contains('Meeting Video Quality'), td:contains('In-Meeting Collaboration & IM'), td:contains('Join from Any Device'), td:contains('Record Audio and Video in Meetings'),...