как установить фоновое изображение для начальной загрузки таблицы

Question

Это вопрос касается

Я пробовал много с этим методом, но, к сожалению, не удалось найти решение.

так чувствовал, чтобы задать этот вопрос после того, как вдоль поиска в сети *

===================================================================== 
    Is there any way to make an image go backside of the table and looks 
    like only image visible and table behind on the image itself. 
    code will be like this* 

    Aim: To have an image as a background for a table which is 
    developed under bootstrap. 
    ------------------------------------- 
    The preferred result should look like this 
    link:https://jsfiddle.net/39mdqkz2/4/ 

Пример вывода, как это должно выглядеть:. jsfiddle.net/39mdqkz2/4/

Answer 1

Это некрасиво, но это, кажется, работает:

table { 
    background-size: 3096px auto; 
    background-repeat: no-repeat; 
    background-image: url("http://questromworld.bu.edu/studyabroad/files/2014/07/Luc-Australia-Beach.jpg"); 
} 

Answer 2

По умолчанию bootstrap-table не применяет никакого стиля фона (это прозрачно) ex cept для класса table-hover, который окрашивает фон строки, на которой курсор мыши в настоящее время витает. Вместо укладки всех таблиц с селектором table CSS, я предложил бы использовать тот же селектор используется для инициализации начальной загрузки-таблицы:

HTML

<table id="tableWithBgImage"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
      <td>Tiger Nixon</td> 
      <td>System Architect</td> 
      <td>Edinburgh</td> 
      <td>61</td> 
      <td>2011/04/25</td> 
      <td>$320,800</td> 
     </tr> 
     <!-- Additional rows removed for brevity --> 
    </tbody> 
</table> 

Как вы можете видеть, что я удалил классы из вашего примера JSFiddle ... table-striped вызовет окрашивание альтернативных строк (что не работает в вашем JSFiddle, потому что для этого класса нет CSS). table-bordered по умолчанию используется в bootstrap-таблице, поэтому он является избыточным и может быть опущен. Я также создал идентификатор для инициализации загрузочной таблицы, а также применил специальный стиль. Я удалил cellspacing, потому что он избыточен с помощью загрузочной таблицы, которая по умолчанию не имеет интервала между ячейками. Наконец, я удалил атрибуты height/width в пользу указания CSS.

JavaScript

$(document).ready(function() { 
    $("#tableWithBgImage").bootstrapTable(
     // Set the initial classes for the table 
     // This removes the bootstrap-table default inclusion of 'table-hover' 
     // to prevent rows from being highlighted on hover. Add 'table-hover' to the 
     // list if you want to re-enable this 
     classes: "table" 
    ); 
}); 

Опция classes устанавливает начальные имена классов при начальной загрузке стол инициализирует.

CSS

#tableWithBgImage { 
    background-repeat: no-repeat; 
    background-image: url('http://questromworld.bu.edu/studyabroad/files/2014/07/Luc-Australia-Beach.jpg'); 
    height: 600px; 
    width: 600px; 
} 

Если вы еще не получаете фоновое изображения в вашем начальной загрузке стола, то вы должны иметь другой CSS где-то, что окраска стола, или в противном случае запутывания фонового изображения таблицы. Если это так, и если это возможно, это поможет нам увидеть ваши HTML, CSS и JavaScript для рассматриваемой таблицы начальной загрузки.