Creating an Ember.js component for each table row causes the width to change?

In my Ember.js application, I have a standard HTML table inside a Hanldebars template like this:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email Address</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>john.d@gmail.com</td>
            <td>111-111-1111</td>
        </tr>
        <tr colspan="3">
            <td><!-- Loads of other markup  --></td>
        </tr>
    </tbody>
</table>

This works fine but, I have to turn each table row into a component in order to add some logic etc. Instead of directly adding the rows, I now have:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email Address</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        
            
        
    </tbody>
</table>

As you can see, I now have a component called table-row which has the entire first and second (with colspan="3") elements from the above HTML. The problem is, when I insert it as a component, Ember wraps the two rows in a and this causes the rows to show up awkwardly. It doesn't take the width of the table and the table head. How can I fix this?