Enfold Table Issue in Mobile view

Hi,

I recently noticed an issue with the two tables I created while viewing in mobile view:
http://littledigitalagency.com/Client/openfin/runtime/openfin-vs-chrome/
and
http://littledigitalagency.com/Client/openfin/runtime/evaluate/

The columns do not line up with their correct row data cell. The easiest example to view (it is like this on both tables) in on this table:
http://littledigitalagency.com/Client/openfin/runtime/evaluate/ . If you pull the browser window in to a phone size you can see the first green “35” should be under ‘OpenFin’ which it is not. “OpenFin” is shown with the next column’s #. The last column heading “Awesomium” is dropped altogether.

Any ideas?

I believe it has to do with some mobile code I placed trying to get rid of all those empty rows under the row Headings such as under “Chromium”. When viewed on a Phone those empty rows do not appear but I have a feeling it is causing other issues.

Here is all of the Table Custom CSS:

/**disable icon transition**/

.avia_transform .avia-table .av_font_icon {
opacity: 1 !important;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/*End Disable icon transition*/

div .avia-table {
    border-right-style: solid;
    border-right-width: 1px;
}
div .avia-table tr {
	background-color: #F1F8FC !important;
}

.avia-data-table .avia-desc-col {
    text-align: left !important;
}

tr:first-child th {
    border-top-style: solid;
    border-top-width: 1px;
    text-align: center;
    text-transform: none;
	font-family: "Roboto", sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	letter-spacing: 0px !important;
	color: #292929 !important;
	background-color: #DFF1F5 !important;
	padding: 15px 30px 15px 30px !important;
}

.avia-heading-row .avia-desc-col, .pricing-table {
	color: #292929 !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	letter-spacing: 0px !important;
	text-transform: none !important;
	background-color: #E6F4FE !important;
	border-left: 1px solid #e1e1e1 !important;
}
.avia-desc-col {
    background-color: #F1F8FC !important;
    font-family: "Roboto",sans-serif !important;
    font-weight: 300 !important;
    text-align: right;
    text-transform: none !important;
}
#top tr.avia-heading-row:first-child .avia-desc-col {
    background-color: #F1F8FC !important;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left: none !important;
}
.avia-heading-row th {
	background-color: #E6F4FE !important;
	border-left: none !important;
	border-right: none !important;
}
/*OpenFin BG Color*/
tr.avia-heading-row:first-child th:nth-child(2) {
	background-color: #D0E2EF !important;
	border-left: 1px solid #e1e1e1 !important;
}
tr.avia-heading-row:first-child th:nth-child(3) {
	border-left: 1px solid #e1e1e1 !important;
}
tr.avia-heading-row:first-child th:nth-child(4) {
	border-left: 1px solid #e1e1e1 !important;
}
tr.avia-heading-row:first-child th:nth-child(5) {
	border-left: 1px solid #e1e1e1 !important;
}
tr.avia-heading-row:first-child th:nth-child(6) {
	border-left: 1px solid #e1e1e1 !important;
}

Here is the questionable Mobile code for the tables:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.avia-heading-row th:nth-child(2) {
	display: none !important;
}
.avia-heading-row th:nth-child(3) {
	display: none !important;
}
.avia-heading-row th:nth-child(4) {
	display: none !important;
}
.avia-heading-row th:nth-child(5) {
	display: none !important;
}
.avia-heading-row th:nth-child(6) {
	display: none !important;
} 
}