Разделите содержимое таблицы на два раздела рядом в HTML

Question

У меня есть таблица в pdf (которая генерируется из html страницы) с большой высотой. Я хочу разделить на две таблицы и отображать бок о бок разделы. Содержимое таблицы - динамическое c и итеративное от meteor Js. Я попытался поместить таблицу в тег div и применить стиль column-count = 2. Но выход не ожидается.

<style type="text/css">
    .metric-data tr:nth-child(odd){background: #f8f8f8;}
    .container{
      column-count: 2;
      -moz-column-count:2;
    -webkit-column-count:2;
    }

</style>

    {{#if checkMetricData this.goals}}
                  <tr>
                    <td>  <div class="container">                
                          <table width="100%" class="metric-data" style="border-bottom: 1px #0c4164 solid; font-size: 9px; border-top: 1px #0c4164 solid; padding: 5px 10px;">
                              <tbody>               

                                {{#each getMetricData this.goals}}                    
                                  <tr>
                                    <td style="padding: 5px;"><b style="color: #0c4164;">{{name}}</b></td>
                                      <td style="padding: 5px;"><span style="font-weight: bold;">{{value}}</span></td>
                                      <td style="padding: 5px;">{{date}}</td>
                                    </tr>
                                  {{/each}} 

                              </tbody>
                            </table> 
                        </div>                                  
                    </td>

                  </tr>
                  {{/if}}