Question

我正在使用Datatables渲染表格。我也在我的html页面中使用bootstrap。我想在表格的主体中显示背景图像（响应），并不能确切地弄清楚如何。我尝试了以下方法：

<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' ">

以上都不适用。我注意到当我尝试更改背景颜色时，身体中没有反映出任何变化。如果这是一个引导问题，我现在不会。我是Web Dev的新手，请建议我做什么。进口：

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

进口的正确顺序是什么？

Answer 1

解

使用下面的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-condensed" cellspacing="0" width="100%">

      <!-- skipped -->

   </table>
</div>

样本

请参阅this jsFiddle以获取代码和演示。

注意

包括以下文件：

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

1 个答案:

解

样本

注意