Bootstrap table's styles messed up when used with Ember.js

Question

I work with bootstrap. When I create a table in plain HTML, bootstrap's table styles are applied as expected.

But, when I insert the same HTML into an Ember.js template, the bootstrap's table styles don't seem to apply (e.g. table borders, paddings and stripes are not present). Fiddle: http://jsfiddle.net/5evymbou/

Plain HTML:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <table id="search-results" class="table table-striped">
                <tr>
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                </tr>
                <tr>
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                </tr>
            </table>
        </div>
    </div>
</div>

The same HTML - but used in an Ember template:

<script type="text/x-handlebars" data-template-name="application">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <table id="search-results" class="table table-striped">
                    <tr>
                        <td>a</td>
                        <td>b</td>
                        <td>c</td>
                    </tr>
                    <tr>
                        <td>a</td>
                        <td>b</td>
                        <td>c</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</script>

<div id="root"></div>

<script>
    App = Em.Application.create({
        rootElement: '#root'
    })
</script>

Answer 1

That is because the Bootsrap CSS relies on the presence of tbody,thead etc. which are automatically inserted in to your HTML by the browser if you don't include them. You can check this yourself by inspecting your table in your browsers development tools.

Because your ember table is added to the DOM after the HTML is parsed, these element are not automatically created by the browser.

Example of Bootstrap CSS:

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

You can fix your code easily by adding a tbody element to your template:

<script type="text/x-handlebars" data-template-name="application">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <table id="search-results" class="table table-striped">
                    <tbody>
                        <tr>
                            <td>a</td>
                            <td>b</td>
                            <td>c</td>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>b</td>
                            <td>c</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</script>

Updated Fiddle