Menu icon Foundation
Large Columns, Emails, Table Rows

I am running into an issue. When designing an email template, I am using the following  <th class="small-12 large-3 columns">, when the screen size meets the small requirement, the row collapses the cell into a single column as determined by the class "small-12". When the screen is expanded, I believe that based off of the class "large-3" it should only allow "four" cells in a single row, pushing any remaining cells to the next "row" below. See the linked JSFiddle, https://jsfiddle.net/xq1fdtqs/ 

I the example, I have "nine" cells in a single row. Ideally, when viewed on a large screen the max number of cells in a single row should be "four" so, it should look like the following

one two three four

five six seven eight

nine

Instead, it just displaying as 

one two three four five six seven eight nine 

What am I missing? Any help would be greatly appreciated.

Thanks.

email large columns table

I am running into an issue. When designing an email template, I am using the following  <th class="small-12 large-3 columns">, when the screen size meets the small requirement, the row collapses the cell into a single column as determined by the class "small-12". When the screen is expanded, I believe that based off of the class "large-3" it should only allow "four" cells in a single row, pushing any remaining cells to the next "row" below. See the linked JSFiddle, https://jsfiddle.net/xq1fdtqs/ 

I the example, I have "nine" cells in a single row. Ideally, when viewed on a large screen the max number of cells in a single row should be "four" so, it should look like the following

one two three four

five six seven eight

nine

Instead, it just displaying as 

one two three four five six seven eight nine 

What am I missing? Any help would be greatly appreciated.

Thanks.

Corey Schaaf about 2 years ago

 On large, your columns must add up to 12 in a row. if they don't you can use offsets (as explained in the docs) to have uneven rows.  However what you're trying to do is not going to work. 

Your columns have to add up to 12 in a single row. 

row

One (3 columns) |  Two (3 columns)  |  Three (three columns)  |  Four (three columns) = 12

/row

row

Five (3 columns) |  Six (3 columns)  Seven  (three columns)  |  Eight (three columns)  = 12

/row


row
nine (3 columns) (you would need to use the "large-offsets" classes for this row since they don't add up to 12. 

/row

 

your html code also had some nesting errors with <th> that I corrected. The new HTML would look like this and should achieve the result you're looking for. 

<body>
  <!-- Wrapper for the body of the email -->
  <table class="body" data-made-with-foundation>
    <tr>
      <!-- The class, align, and <center> tag center the container -->
      <td class="float-center" align="center" valign="top">
        <center>
          <!-- The content of your email goes here. -->
        <table align="center" class="container">
            <tbody>
                <tr>
                  <td>
                    <table align="center" class="container">
                      <tbody>
                        <tr>
                          <td>
                            <table class="row">
                              <tbody>
                                <tr>
                                  <th class="small-12 large-3 columns first">
                                    <table>
                                      <tr>
                                        <th>One</th>
                                      </tr>
                                    </table>
                                  </th>
                                  <th class="small-12 large-3 columns">
                                    <table>
                                      <tr>
                                        <th>Two</th>
                                      </tr>
                                    </table>
                                  </th>
                                  <th class="small-12 large-3 columns">
                                    <table>
                                      <tr>
                                        <th>Three</th>
                                      </tr>
                                    </table>
                                  </th>
                                  <th class="small-12 large-3 columns last">
                                    <table>
                                      <tr>
                                        <th>Four</th>
                                      </tr>
                                    </table>
                                  </th>
                                </tr>
                              </tbody>
                            </table>
                            <table class="row">
                              <tbody>
                                <tr>
                                  <th class="small-12 large-3 columns first">
                                    <table>
                                      <tr>
                                        <th>Five</th>
                                      </tr>
                                    </table>
                                  </th>
                                  <th class="small-12 large-3 columns">
                                    <table>
                                      <tr>
                                        <th>Six</th>
                                      </tr>
                                    </table>
                                  </th>
                                  <th class="small-12 large-3 columns">
                                    <table>
                                      <tr>
                                        <th>Seven</th>
                                      </tr>
                                    </table>
                                  </th>
                                  <th class="small-12 large-3 columns last">
                                    <table>
                                      <tr>
                                        <th>Eight</th>
                                      </tr>
                                    </table>
                                  </th>
                                </tr>
                              </tbody>
                            </table>
                            <table class="row">
                              <tbody>
                                <tr>
                                  <th class="small-12 large-3 columns first">
                                    <table>
                                      <tr>
                                        <th>Nine</th>
                                      </tr>
                                    </table>
                                  </th>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
             </tbody>
           </table>
        </center>
      </td>
    </tr>
  </table>
</body>