将背景图像添加到DataTable [英] Add background image to DataTable

问题描述

我正在使用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> 
  

DEMO

请参阅此jsFiddle 代码和

注意

包含以下文件：

  <！ -  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?

解决方案

SOLUTION

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>

DEMO

See this jsFiddle for code and demonstration.

NOTES

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！