ember-view wrapper is breaking my table

I am new to ember and working on a simple test app. I am trying to render the rows of a table dynamically from json data. The task is relatively simple. However each row is a component and ember wraps the element in a div with class ember-view. I believe this is preventing my table from rendering properly. How would this typically be handled in ember?

//contact-listing.hbs
<tr>
   <th scope="row">{{contact.employee_id}}</th>
   <td>{{contact.firstName}}</td>
   <td>{{contact.lastName}}</td>
   <td>{{contact.email}}</td>
   <td>{{contact.telephone}}</td>
   <td>{{contact.department}}</td>
</tr>

//contacts.hbs
<h1>Employees</h1>
<table class="table">
  <thead>
    <tr>
      <th>Employee ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Telephone</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    {{#each model as |_contact|}}
      {{contact-listing contact=_contact}}
    {{/each}}
  </tbody>
</table>

Now here is the markup I am getting back - in the browser all the td data is rendered as inline with no table formatting. I think this is due to the insertion of ember wrapper divs.

<div id="ember438" class="ember-view">
    <tr>
      <th scope="row"><!----></th>
      <td><!----></td>
      <td><!----></td>
      <td>john@company.com</td>
      <td>416-555-1111</td>
      <td>finance</td>
    </tr>
</div>