So im a novice at coding and pretty much learn from tutorial and looking at others code. I am haiving issues getting this code to work properly int he outlook and on mobile devices. basically it stack correctly on most devices but not outlooks mobile app displaying the the table correctly in mobile view. i am sending through a email client Acton. and can sulpply full email code if that would help. since its email i tried to but as much inline as i could while still getting it to function.

but below is the responsive table i am having issues with.

here is a link to an image of how it is acting
http://www.nationalfoodgroup.com/site/issues/Outlook stack.jpeg

here is the way i would like it to display
http://www.nationalfoodgroup.com/site/issues/proper display.PNG

at first i thought it might be the
50% in

"
.stack td[class="stackablecell"]{
/* Behave like a "row" */
border: none;
position: relative;
padding: 1% 0 2% 50%;
height: auto;

"
but that disnt seem to correc it

here is my code, any help would be greatly appreciated
<style>
@media screen and (max-width:600px){

table.stack, .stack thead, .stack tbody, .stack th, .stack td, .stack tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
.stack thead tr[class="stackablerow"] {
position: absolute !important;top: -9999px !important;left: -9999px !important;
}

.stack tr[class="stackablerow"]:nth-child(odd) {
background: #b9c7d4;
margin-top: 10px 0 0 10px;
}

.stack td[class="stackablecell"]{
/* Behave like a "row" */
border: none;
position: relative;
padding: 1% 0 2% 50%;
height: auto;

}

.stack td[class="stackablecell"]:before {
/* Now like a table header /
position: absolute;
/
Top/left values mimic padding */
left: 6px;
width: 45%;
padding: 1% 10px 2% 0;
white-space: nowrap;

}

.stack td[class="stackablecell"]:nth-of-type(1):before { content: "Item#"; }
.stack td[class="stackablecell"]:nth-of-type(2):before { content: "Description"; }
.stack td[class="stackablecell"]:nth-of-type(3):before { content: "Pack Size"; }
.stack td[class="stackablecell"]:nth-of-type(4):before { content: "Serving Size"; }
.stack td[class="stackablecell"]:nth-of-type(5):before { content: "Meal Contribution"; }

}

</style>

<table class="stack" border="0"; cellpadding="0"; cellspacing="0" width="100%" style="table-layout: fixed; display: block;">
<tr>
<td>
<table class="stack" style="border:0; cellpadding:0; cellspacing:0; " >
<thead role="rowgroup">
<tr class="stackablerow" style=" margin: 10 0 1rem 0; background-color: #7d98ab;">
<td class="stackablecell" style="font-size: 10pt; color: #fff; font-family: Helvetica, Arial, Sans-Serif; padding: 5px; width: 50px;">Item#</td>
<td class="stackablecell" style="font-size: 10pt; color: #fff; font-family: Helvetica, Arial, Sans-Serif; padding: 5px; width: 300px;">Description</td>
<td class="stackablecell" style="font-size: 10pt; color: #fff; font-family: Helvetica, Arial, Sans-Serif; padding: 5px; width: 95px;">Pack Size</td>
<td class="stackablecell" style="font-size: 10pt; color: #fff; font-family: Helvetica, Arial, Sans-Serif; padding: 5px; width: 95px;">Serving Size</td>
<td class="stackablecell" style="font-size: 10pt; color: #fff; font-family: Helvetica, Arial, Sans-Serif; padding: 5px; width: 120px;">Meal Contribution</td>
</tr>
</thead>
<tr class="stackablerow" style=" margin: 10 0 1rem 0;">
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">600378</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">Cooked Irregular Egg Patty</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">23 lb. Bulk </td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">2 oz</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">1.4 oz = 1 M/MA</td>
</tr>
<tr class="stackablerow" style=" margin: 10 0 1rem 0;">
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">51690</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">Turkey Bacon Slices, CN</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">48/3.5 oz</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">3.5 oz</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">2 M/MA</td>
</tr>
<tr class="stackablerow" style=" margin: 10 0 1rem 0;">
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">607471</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">American Cheese, Sliced</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">4/5 lb. Loaves</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">1 oz</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">1 M/MA</td>
</tr>
<tr class="stackablerow" style=" margin: 10 0 1rem 0;">
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">604563</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">Sliced Croissant, WG</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">48/2.35 oz</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">2.35 oz</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">2 GRN</td>
</tr>
<tr class="stackablerow" style=" margin: 10 0 1rem 0;">
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">612360</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">Sliced Honey Wheat Biscuit, WG</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">6/24ct</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">2 oz</td>
<td class="stackablecell" style="font-size: 10pt; color: #636466; font-family: Helvetica, Arial, Sans-Serif; border-bottom: 1px solid #eee;">2 GRN</td>
</tr>
</table>
</td>
</tr>
</table>