TRG - Skype Business DCM - Round 2

finalized layout format (version 12)

by dixalex

HTML

<table class="dcmTable">
  <tbody>
    <tr>
      <td class="officeHeader firstColumn" colspan="6"><span class="centerIt">Office 365 Features (Office 365 purchase required to utilize Skype for Business add on)<span class="officeToggle">(+/-)</span></span>
      </td>
    </tr>
    <tr>
      <td class="officeFixed oddOffice firstColumn" colspan="3">Full, installed Office applications</td>
      <td class="officeFixed oddOffice" colspan="3">ü</td>
    </tr>
    <tr>
      <td class="officeFixed evenOffice firstColumn" colspan="3">Office Mobile for tablets and phones</td>
      <td class="officeFixed evenOffice" colspan="3">ü</td>
    </tr>
    <tr>
      <td class="officeFixed oddOffice firstColumn" colspan="3">Office Online</td>
      <td class="officeFixed oddOffice" colspan="3">ü</td>
    </tr>
    <tr>
      <td class="officeFixed evenOffice firstColumn" colspan="3">1 TB File storage and sharing</td>
      <td class="officeFixed evenOffice" colspan="3">ü</td>
    </tr>
    <tr>
      <td class="officeFixed oddOffice firstColumn" colspan="3">Business-class email, calendar, contacts</td>
      <td class="officeFixed oddOffice" colspan="3">ü</td>
    </tr>
    <tr>
      <td class="officeFixed evenOffice firstColumn" colspan="3">Online meetings, IM, and HD videoconferencing</td>
      <td class="officeFixed evenOffice" colspan="3">ü</td>
    </tr>
    <tr>
      <td class="officeFixed oddOffice firstColumn" colspan="3">Intranet site for your teams</td>
      <td class="officeFixed oddOffice" colspan="3">ü</td>
    </tr>
    <tr>
      <td class="officeFixed evenOffice firstColumn" colspan="3">Personalized search and discovery</td>
      <td class="officeFixed evenOffice" colspan="3">ü</td>
    </tr>
    <tr>
      <td class="officeFixed oddOffice firstColumn" colspan="3">Corporate video portal</td>
      <td class="officeFixed oddOffice" colspan="3">ü</td>
    </tr>
    <tr>
      <td class="officeFixed evenOffice firstColumn" colspan="3">Enterprise management of...

CSS

table.dcmTable {
  border-collapse: collapse;
  max-width: 1025px;
}

table.dcmTable td.firstColumn {
  text-align: left;
  border-left: solid 1px #000;
  padding: 2px;
}

table.dcmTable td {
  /*border: solid 1px #000;*/
  font-size: .79em;
  font-family: arial;
  text-align: center;
  padding: 0;
  margin: 0;
}

table.dcmTable td.officeHeader {
  background-color: #fff2cc;
  color: #c65911;
  font-weight: bold;
  font-size: .81em;
  text-align: center;
  border-top: solid 1px #000;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
  border-bottom: none;
}

span.centerIt {
  text-align: center;
  margin: 0 auto;
  display: inline-block;
  clear: none;
  width: 100%;
}

td.oddOffice {
  background-color: #cdc7a7;
  color: #000;
  border-top: none;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
  border-bottom: none;
}

td.evenOffice {
  background-color: #d0cece;
  color: #000;
  border-top: none;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
  border-bottom: none;
}

table.dcmTable td.skypeHeader {
  background-color: #9bc2e6;
  font-weight: bold;
  color: #000;
  font-weight: bold;
  font-size: .81em;
  text-align: center;
  border-top: solid 1px #000;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
  border-bottom: none;
}

td.oddSkype {
  background-color: #fff;
  color: #000;
}

td.evenSkype {
  background-color: #e6e9ee;
  color: #000;
}

td.secondSkpeColumn {
  border-left: solid 1px #CCC;
  border-right: solid 1px #000;
}

table.dcmTable td.dcmHeader {
  background-color: #a9d08e;
  font-weight: bold;
  text-align: center;
  border: solid 1px #000;
}

table.dcmTable td.dcmHeaderRow {
  background-color: #c6e0b4;
  font-weight: bold;
  border: solid 1px #000;
  vertical-align: top;
  padding: 2px !important;
}

table.dcmTable td.dcmRow {
  border-left: solid 1px #CCC;
  width: 158px;
}

table.dcmTable td.firstColDCM {
  width: 170px;
}

td.evenRowDCM {
  background-color: #e2efda;
}

td.oddRowDCM...

JavaScript

$('span.officeToggle').on("click", function() {
  $('td.officeFixed').toggleClass("hideOffice");
});
$('span.skypeToggle').on("click", function() {
  $('td.skypeFixed').toggleClass("hideSkype");
});