S2230499 - cannedO365

by dixalex

HTML

<table class="dcmTableFixed">
    <tbody>
        <tr>
            <td class="firstColumn firstRow"></td>
            <td class="firstRow fourthColumn thickLeftBorder voip">Office 365 Business Essentials</td>
            <td class="firstRow productivity">Office 365 Business Premium</td>
            <td class="firstRow combined">Google Docs For Business</td>

            <td class="firstRow combined noneSelection">None of These</td>
        </tr>

        <tr>
            <td class="firstColumn productivityEven productivityEvenHeader">Productivity Features</td>


            <td class="productivityEven productivityEvenHeader fourthColumn thickLeftBorder">&nbsp;</td>
            <td class="productivityEven productivityEvenHeader">&nbsp;</td>
            <td class="productivityEven productivityEvenHeader">&nbsp;</td>


            <td rowspan="13" class="productivityEven none">
                <p>I would not purchase any of the options to the left and would either</p>
                <p>(a) Continue to use my organization's current solution</p>
                <p>(b) Seek an alternative not listed on this screen</p>
            </td>
        </tr>
        <tr>
            <td class="firstColumn productivityOdd">Fully installed Productivity Apps (always up to date with most recent version)</td>


            <td class="productivityOdd fourthColumn thickLeftBorder">-</td>
            <td class="productivityOdd">Office (Word, Excel, PowerPoint, Publisher OneNote, Outlook)</td>
            <td class="productivityOdd">-</td>

        </tr>
        <tr>
            <td class="firstColumn productivityEven">Browser-based Productivity Apps</td>


            <td class="productivityEven fourthColumn thickLeftBorder">Office Online</td>
            <td class="productivityEven">Office Online</td>
            <td class="productivityEven">Google Apps</td>

        </tr>
        <tr>
            <td class="firstColumn productivityOdd">Mobile-based Productivity Apps</td>


         ...

CSS

table.dcmTableFixed {
    border-collapse: collapse;
    border-bottom: solid 2px #000;
    border-top: none;
    border-left: none;
    border-right: none;
    width: 950px;
}

table.dcmTableFixed td {
    border: solid 1px #DDD;
    font-family: arial;
    font-size: .71em;
    text-align: center;
    padding: 2px;
    min-width: 118px;
}

table.dcmTableFixed td.firstColumn {
    color: #000;
    border-left: solid 2px #000;
    min-width: 255px;
    text-align: left;
}

table.dcmTableFixed td.firstColumn.firstRow {
    border: none;
    border-top: none;
}

table.dcmTableFixed td.firstColumn.secondRow {
    border: none;
}

.firstRow.voip {
    /*background-color: #FFF2CF;*/
    border-left: solid 2px #000;
    border-top: solid 2px #000;
    border-right: solid 2px #000;
    font-weight: bold;
}

.firstRow.productivity {
    /*background-color: #E2EFDB;*/
    border-left: solid 2px #000;
    border-top: solid 2px #000;
    border-right: solid 2px #000;
    font-weight: bold;
}

.firstRow.combined {
    /*background-color: #CCC;*/
    border-left: solid 2px #000;
    border-top: solid 2px #000;
    border-right: solid 2px #000;
    font-weight: bold;
}

.firstRow.hideCell {
    /*background-color: #CCC;*/
    display: none;
}

.secondRow {
    font-weight: bold;
    vertical-align: bottom;
}

td.productivityEven {
    /*background-color: #fff2cc;*/
    background-color: #cdc7a7;
}

td.productivityEven.productivityEvenHeader {
    background-color: #fff2cc;
    font-weight: bold;
    border-top: solid 2px #000;
    /*background-color: #cdc7a7;*/
}

td.productivityEven.google,
td.productivityEven.none {
    /*background-color: #fff2cc;*/
    /*background-color: #cdc7a7;*/
    background-color: #f2f2f2;
}

td.productivityOdd {
    background-color: #d0cece;
}

td.telephonyEven {
    background-color: #FFFFFF;
}

td.telephonyOdd {
    background-color: #e6e9ee;
}

td.telephonyOdd.telephonyOddHeader {
    background-color: #9bc2e6;
    font-weight: bold;
   ...