Html 引导表';s样式在与Ember.js一起使用时会出错
我使用bootstrap。当我用纯HTML创建一个表时,引导的表样式会按预期应用 但是,当我在Ember.js模板中插入相同的HTML时,引导的表格样式似乎不适用(例如,表格边框、填充和条纹不存在)。小提琴: 普通HTML:Html 引导表';s样式在与Ember.js一起使用时会出错,html,css,twitter-bootstrap,ember.js,html-table,Html,Css,Twitter Bootstrap,Ember.js,Html Table,我使用bootstrap。当我用纯HTML创建一个表时,引导的表样式会按预期应用 但是,当我在Ember.js模板中插入相同的HTML时,引导的表格样式似乎不适用(例如,表格边框、填充和条纹不存在)。小提琴: 普通HTML: <div class="container"> <div class="row"> <div class="col-md-12"> <table id="search-results"
<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 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>
.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;
}
<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>
A.
B
C
A.
B
C
相同的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>
<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>
.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;
}
<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>
A.
B
C
A.
B
C
App=Em.Application.create({
根元素:“#根”
})
这是因为Bootsrap CSS依赖于tbody
、thead
等的存在,如果不包含它们,浏览器会自动将它们插入HTML中。您可以通过检查浏览器开发工具中的表来检查这一点
由于解析HTML后会将ember表添加到DOM中,因此浏览器不会自动创建这些元素
引导CSS示例:
<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 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>
.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;
}
<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>
您可以通过在模板中添加tbody
元素来轻松修复代码:
<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 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>
.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;
}
<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>
A.
B
C
A.
B
C
谢谢你的回答-这就解决了问题。(哈哈,在我发布了这个问题后,我实际上浏览了bootstrap的风格,也找到了它——意外发现:)。