Menu icon Foundation
Adding a data table in Ink

I am using Ink to try and create an order confirmation e-mail from an ecommerce store. If I have a table that shows item info or any sort of data I layout, the last column is crunched to one character width when resizing to small. Example code in a 6-column cell is attached for code as well as the output screenshot.

Any ideas how I can fix this?

                      <table class="six columns">
                        <tr>
                          <td>
                              <table width="100%">
                              	<tr>
                          			<td>Subtotal</td>
                          			<td>$60.00</td>
                      			</tr>
                          		<tr>
                          			<td>Shipping & Handling</td>
                          			<td>$11.91</td>
                      			</tr>
                          		<tr>
                          			<td><strong>Grand Total</strong></td>
                          			<td><strong>$71.91</strong></td>
                      			</tr>
                      		</table>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>
            

         

Example

inktableemail

I am using Ink to try and create an order confirmation e-mail from an ecommerce store. If I have a table that shows item info or any sort of data I layout, the last column is crunched to one character width when resizing to small. Example code in a 6-column cell is attached for code as well as the output screenshot.

Any ideas how I can fix this?

                      <table class="six columns">
                        <tr>
                          <td>
                              <table width="100%">
                              	<tr>
                          			<td>Subtotal</td>
                          			<td>$60.00</td>
                      			</tr>
                          		<tr>
                          			<td>Shipping & Handling</td>
                          			<td>$11.91</td>
                      			</tr>
                          		<tr>
                          			<td><strong>Grand Total</strong></td>
                          			<td><strong>$71.91</strong></td>
                      			</tr>
                      		</table>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>
            

         

Example
Leonardo Baptista Lopes over 3 years ago

Hi David, it's been long since you posted, but maybe this answer may help others.
I had the exact same problem and I solved by getting to the property that was doing it on mobile.

The code in question is on ink.css:

table[class="body"] table.columns td,
table[class="body"] table.column td {
   width: 100% !important;
}

I just overrode this code on a media-query statement on my own code and changed the width on a more specific selector to:

width: auto !important;