S0810055 - Pfizer Vitamins - JSFiddle

by dixalex

HTML

<table class='grid setWidth conjoint_table'>
    <tbody>
        <tr>
            <td>Type of Supplement</td>
            <td>Personalized nutritional supplement</td>
            <td>Personalized nutritional supplement</td>
            <td>Personalized nutritional supplement</td>
            <td>Personalized nutritional supplement</td>
        </tr>
        <tr>
            <td>Brand</td>
            <td>Centrum</td>
            <td>Care/Of</td>
            <td>Amway</td>
            <td>One-A-Day</td>
        </tr>
        <tr>
            <td>Initial Assessment</td>
            <td>Online questionnaire plus phone consultation with dietary expert</td>
            <td>Online questionnaire</td>
            <td>In-person questionnaire at an in-store kiosk</td>
            <td>Online questionnaire</td>
        </tr>
        <tr>
            <td>Supplement Format</td>
            <td>Single pill made specifically for you</td>
            <td>Sealed packet containing multiple pills</td>
            <td>Powder that can be mixed into food or drinks</td>
            <td>Sealed packet of gummies</td>
        </tr>
        <tr>
            <td>Supplement Delivery/Pick-Up Method</td>
            <td>Pick up in person from your dietary expert or primary care provider</td>
            <td>Delivered to your home</td>
            <td>Vended by kiosk on the spot</td>
            <td>Pick up behind the counter at a retail pharmacy</td>
        </tr>
        <tr>
            <td>Price of Supplements (for one month supply)
            </td>
            <td>$30 for one month supply</td>
            <td>$60 for one month supply</td>
            <td>$75 for one month supply</td>
            <td>$45 for one month supply</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>Optional Add-On Diagnostics Available</td>
           ...

CSS

.grid.conjoint_table {
    border-collapse: collapse;
    margin: 0 auto;
    width: 850px;
    font-size: .83em;
    font-family: arial;
}

.grid.conjoint_table td {
    padding: .5em;
    vertical-align: top;
}

.even_cols {
    background-color: #F2F2F2;
}

.odd_cols {
	background-color: #FFF;
}

.grid.conjoint_table .first_column {
    background-color: #305496;
    color: #FFF;
    border: solid 1px #FFF;
    border-right: solid 1px #FFF;
    min-width: 200px;
}

.grid.conjoint_table .first_column.bottom_row {
	border-bottom: solid 1px #BF8F00;
    border-top: solid 1px #BF8F00;
    border-left: solid 1px #BF8F00;
	border-right: none;
	background-color: #FFF;
}

.grid.conjoint_table .last_column.bottom_row {
    border-bottom: solid 1px #BF8F00;
    border-top: solid 1px #BF8F00;
    border-left: none;
	border-right: solid 1px #BF8F00;
	background-color: #FFF;
}

.grid.conjoint_table .first_column.spacer_row {
    border-bottom: solid 1px #BF8F00;
    border-left: none;
	border-right: none;
	background-color: #FFF;
}

.grid.conjoint_table .bottom_row {
    border-bottom: solid 1px #BF8F00;
    border-top: solid 1px #BF8F00;
}

JavaScript

jQuery('.conjoint_table tr').each(function(index, element) {
    jQuery(element).children('td').each(function(td_index, td_element) {
        //Assign first_column class to first column in grid.
		if (td_index === 0) {
            jQuery(td_element).addClass('first_column');
        }
        if (td_index > 0) {
            jQuery(td_element).data('column_index', td_index + 1);
        }
		//Assign last_column class to last column in grid.
        if (td_index === (jQuery(element).children('td').length - 1)) {
            jQuery(td_element).addClass('last_column');
        }
        //Assign row_spacer class to second to last row.
        if (index === (jQuery('.conjoint_table tr').length - 2)) {
            jQuery(td_element).addClass('spacer_row');
        }
        //Assign bottom_row class to last row.
        if (index === (jQuery('.conjoint_table tr').length - 1)) {
            jQuery(td_element).addClass('bottom_row');
        }
    });
});

//https://stackoverflow.com/a/5016327/5076162
var odd_columns = jQuery('td').filter(function(index, element) {
    //return jQuery(element).data('column_index') === current_column_index;
    return !!(jQuery(element).data('column_index') % 2);
});
var even_columns = jQuery('td').filter(function(index, element) {
    //return jQuery(element).data('column_index') === current_column_index;
    return (jQuery(element).data('column_index') % 2 === 0);
});
jQuery(odd_columns).each(function(index, element) {
    jQuery(element).addClass('odd_cols');
});
jQuery(even_columns).each(function(index, element) {
    jQuery(element).addClass('even_cols');
});