html - Bootstrap 表格样式在与 Ember.js 一起使用时搞砸了

Question

我使用 Bootstrap 。当我用纯 HTML 创建表格时，bootstrap 的表格样式会按预期应用。

但是，当我将相同 HTML 插入 Ember.js 模板时， Bootstrap 的表格样式似乎不适用(例如表格边框、填充和条纹不存在)。 fiddle :http://jsfiddle.net/5evymbou/

纯 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>

相同的 HTML - 但在 Ember 模板中使用:

<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

那是因为 Bootsrap CSS 依赖于 tbody、thead 等的存在，如果您不包含它们，浏览器会自动将其插入到您的 HTML 中他们。您可以通过在浏览器开发工具中检查您的 table 来自行检查。

因为您的 ember 表格是在解析 HTML 后添加到 DOM 中的，所以浏览器不会自动创建这些元素。

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;
}

您可以通过向模板添加 tbody 元素轻松修复代码:

<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