Исправлен заголовок таблицы с помощью панели прокрутки

Я знаю, что это дублированный вопрос, и я пробовал все возможные решения, но не удалось. Я использую панель, в которой отображаются мои данные excel, и я хочу исправить столбец в другом заголовке. Каждый css, который я попробовал, нарушил настройки панели, и мне это не удалось. Я использую bootstrap css & имеют более 1000 строк, поэтому мне нужен фиксированный заголовок. Это мой HTMLИсправлен заголовок таблицы с помощью панели прокрутки

<div class="panel panel-primary"> 
      <div class="panel-heading">Excel Sheet</div> 
      <div class="panel-body"> 
       <?php 
       echo '<table class="table table-striped table-hover table-condensed">'; 
       echo "<thead class='thead'>"; 
       echo "<tr class='info'>"; 
       for ($column = 'A'; $column < $lastcol; $column++) { 
        echo "<th>"; 
        echo $worksheet->getCell($column . '1')->getFormattedValue(); 
        echo "</th>"; 
       } 
       echo "</tr>"; 
       echo '</thead>'; 
       echo '<tbody>'; 
       for ($row = 2; $row <= $lastrow; $row++) { 
        echo "<tr>"; 
        for ($column = 'A'; $column < $lastcol; $column++) { 
         echo "<td>"; 
         echo $worksheet->getCell($column . $row)->getFormattedValue(); 
         echo "</td>"; 
        } 
        echo "</tr>"; 
       } 
       echo '</tbody>'; 
       echo "</table>"; 
       ?> 
      </div> 
     </div>

Вот столбца и строки 1 предназначены для цикла, который даст заголовок. Я использовал интегрированный php-html. Другие строки появятся в строке для цикла. это мой css и прокомментированный код - это последний код, который я пробовал.

.panel-heading{ 
    font-size: 15px; 
} 
.panel-body{ 
    overflow:auto; 
    height:400px; 
} 
tr{ 
    border: 1px solid black; 
} 
th{ 
    border: 1px solid black; 
} 
td{ 
    border: 1px solid black; 
}

пример скрипку Here

P.S: Пожалуйста, не забудьте разместить комментарий в случае отрицательного результата голосования за помощь мне. Приветствия!

источник

2017-02-21 tech_geek

Пожалуйста, добавьте jsfiddle или фрагмент с рабочим примером. –

@ P.Frank Как я могу добавить 1000 строк из базы данных в jsfiddle. Я совершенно уверен, что вы не прочитали мой вопрос. –

Да, я читал вам пример, но без вашего кода сложно решить вашу проблему. Не нужно вставлять 1000 строк, только три хороши. Я просто вижу вашу проблему в конкретном случае. –

Попробуйте добавить ниже CSS к вашему .panel первичному:

.panel-primary{ 
    top: 0; 
}

Это должно сделать это.

Надеюсь, это поможет.

источник

2017-02-21 15:52:21

все еще ломают настройки панели и ширину не устанавливали в соответствии с панелью –

Вы можете сделать это с помощью JQuery. Я проверяю ширину каждого первого td для определения каждой ширины th.

$(document).ready(function(){ 
 
    resized(); 
 
}) 
 

 
$(window).resize(function(){ 
 
    resized() 
 
}) 
 

 
function resized(){ 
 
    var widthTd1 = $("td:eq(0)").width(); 
 
    var widthTd2 = $("td:eq(1)").width(); 
 
    var widthTd3 = $("td:eq(2)").width(); 
 
    
 
    var TDPadding = 11; // = padding + border 
 
    
 
    var widthTH1 = widthTd1 + TDPadding; 
 
    var widthTH2 = widthTd2 + TDPadding; 
 
    var widthTH3 = widthTd3 + TDPadding; 
 
    
 
    $("th:eq(0)").css({width:widthTH1 }) 
 
    $("th:eq(1)").css({width:widthTH2 }) 
 
    $("th:eq(2)").css({width:widthTH3 }) 
 
} 
 

 
$(".panel-body").on("scroll",function(){ 
 
\t \t $(".info").offset({top:58}) 
 
})

.panel-primary { 
 
    top: 0; 
 
} 
 

 
.panel-heading { 
 
    font-size: 15px; 
 
} 
 

 
.panel-body { 
 
    overflow: auto; 
 
    height: 400px; 
 
    padding:0 !important; 
 
    margin:15px 
 
} 
 
.info{ 
 
position:absolute; 
 
left:-1px; 
 
} 
 

 
.table{ 
 
    position:relative; 
 
} 
 

 
tbody::before { 
 
    content: "-"; 
 
    display: block; 
 
    line-height: 2em; 
 
} 
 

 
th { 
 
    border: 1px solid black; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel panel-primary"> 
 
    <div class="panel-heading">Excel Sheet</div> 
 
    <div class="panel-body"> 
 
    <table class="table table-striped table-hover table-condensed"> 
 
     <thead class='thead'> 
 
     <tr class='info'> 
 
      <th> 
 
      Qc Code 
 
      </th> 
 
      <th> 
 
      Sample ID 
 
      </th> 
 
      <th> 
 
      Date 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      SE68 
 
      </td> 
 
      <td> 
 
      GC57052 
 
      </td> 
 
      <td> 
 
      1/2/15 17:24 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

источник

2017-02-22 09:18:58

это не полностью соответствовало thead to tbody –

использовать этот пример для того, чтобы сделать именно то, что вы хотите. Строка fisrt исправлена и вы этого не хотите? –

Да, но вы видели, как свиток отстает от первого ряда? –

Исправлен заголовок таблицы с помощью панели прокрутки

ответ

Смежные вопросы