修正了滚动面板

的表头，我知道这是一个重复的问题，我已经试过各种可能的解决方案，但没有成功。我正在使用一个面板，其中显示我的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 –

使用这个例子宽度没有设置为了做出你想要的。第一排是固定的，是你想要的吗？ –

是的，但你已经看到从第一排滚动是如何背后？ –

修正了滚动面板

回答

相关问题