修正了滾動面板

的表頭，我知道這是一個重複的問題，我已經試過各種可能的解決方案，但沒有成功。我正在使用一個面板，其中顯示我的Excel數據，我想修復列中的標題。我試過的每一個CSS都會破壞面板設置，但我沒有成功。我使用引導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。其他行將出現在for循環中。這是我的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到TBODY –

使用這個例子寬度沒有設置爲了做出你想要的。第一排是固定的，是你想要的嗎？ –

是的，但你已經看到從第一排滾動是如何背後？ –

修正了滾動面板

回答

相關問題