问题描述
我正在使用Datatables呈现表格。我也在我的html页面使用引导。我想在表的主体中显示一个背景图像(响应),并不能准确地弄清楚如何。我尝试了以下内容: < div class =table-responsivestyle =20px; background-image:'/ static / img / rsz_background.jpg';>
< table id ={{tab.table_id}}class =table table-hover table-bordered compact leftdata-pagination =truedata-search =truestyle =width:98%!important; background-image:'/ static / img / rsz_background.jpg'>
< tbody style =background-image:'/ static / img / rsz_background.jpg'>
上述都不行。我注意到,当我尝试改变背景颜色,没有变化反映在身体。我现在不是这个引导问题。我是Web Dev的新手,请建议我该怎么办
导入:
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com /bootstrap/3.3.4/css/bootstrap.min.css\">
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js>< / script>
< link href ={{url_for('static',filename ='css / query.css')}} =stylesheettype =text / css>
< link href ={{url_for('static',filename ='css / table.css')}} =stylesheettype =text / css>
<! - 对于DataTable插件 - >
< link href =//cdn.datatables.net/1.10.7/css/jquery.dataTables.css =stylesheettype =text / css>
< script src =// code.jquery.com/jquery-1.11.1.min.jstype =text / javascript>< / script>
< script src =// cdn.datatables.net/1.10.7/js/jquery.dataTables.min.jstype =text / javascript>< / script>
进口的顺序是什么?
使用CSS规则,而不是使用 style
属性内联CSS样式,这被认为是不好的做法。
.table-bg-dark {
color:#FFF;
background-image:url(http://lorempixel.com/1200/800);
background-size:cover;
}
然后,您可以使用以下HTML:
< div class =table-responsive table-bg-dark>
< table id ={{tab.table_id}}class =table table-hover table-bordered table-condensedcellspacing =0width =100%>
<! - skipped - >
< / table>
< / div>
请参阅代码和
包含以下文件:
<! - Twitter Bootstrap - >
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js>< / script>
< link href ={{url_for('static',filename ='css / query.css')}} =stylesheettype =text / css>
< link href ={{url_for('static',filename ='css / table.css')}} =stylesheettype =text / css>
<! - jQuery DataTables - >
< link rel =stylesheettype =text / csshref =https://cdn.datatables.net/r/bs/dt-1.10.9/datatables.min.css/> ;
< script type =text / javascriptsrc =https://cdn.datatables.net/r/bs/dt-1.10.9/datatables.min.js>< / script>
I am rendering a table using Datatables. I am also using bootstrap in my html page. I want to display a background image(responsive) in the body of the table and cannot exactly figure out how. I tried the following:
<div class="table-responsive" style="20px; background-image:'/static/img/rsz_background.jpg';">
<table id="{{tab.table_id}}" class="table table-hover table-bordered compact left" data-pagination="true" data-search="true" style="width:98% !important; background-image:'/static/img/rsz_background.jpg'">
<tbody style ="background-image:'/static/img/rsz_background.jpg' ">
None of the above seem to work. I noticed that when I try to change the background color, no changes are reflected in the body. I don't now if this a bootstrap issue. I am new to Web Dev, please suggest me what to do.Imports:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href= "{{ url_for('static',filename='css/query.css') }}" rel="stylesheet" type="text/css">
<link href= "{{ url_for('static',filename='css/table.css') }}" rel="stylesheet" type="text/css">
<!-- For DataTable plugin -->
<link href= "//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js" type="text/javascript"></script>
What would be the correct order of imports?
Use CSS rule below instead of inlining CSS styles with style
attribute, this is considered to be bad practice.
.table-bg-dark {
color: #FFF;
background-image: url(http://lorempixel.com/1200/800);
background-size: cover;
}
Then you could use the following HTML:
<div class="table-responsive table-bg-dark">
<table id="{{tab.table_id}}" class="table table-hover table-bordered table-condensed" cellspacing="0" width="100%">
<!-- skipped -->
</table>
</div>
See this jsFiddle for code and demonstration.
Include the following files:
<!-- Twitter Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href= "{{ url_for('static',filename='css/query.css') }}" rel="stylesheet" type="text/css">
<link href= "{{ url_for('static',filename='css/table.css') }}" rel="stylesheet" type="text/css">
<!-- jQuery DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs/dt-1.10.9/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs/dt-1.10.9/datatables.min.js"></script>
这篇关于将背景图像添加到DataTable的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!