2017-02-21 4 views
0

これは重複した質問であり、すべての可能な解決策を試しましたが成功しませんでした。私は私の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を使用しました。ループの行に他の行が表示されます。 これは私の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です:私を助けるため、負の投票の場合にコメントを置くことを忘れてはいけないしてください。乾杯!

.panel-primary{ 
    top: 0; 
} 

これはそれを行う必要があります:あなたの.panel-主に以下のCSSを追加

+0

jsfiddleを追加したり、作業例でスニペットください。 –

+0

@ P.Frankどのようにjsfiddleにデータベースから来る1000行を置くことができます。私はあなたが私の質問を読んでいないと確信しています。 –

+0

はい私はあなたの例を読んだが、あなたのコードを見ずにあなたの問題を解決するのは難しい。あなたの1000行を貼り付ける必要はありません、3つだけ良いです。具体的なケースであなたの問題を見ているだけです。 –

答えて

0

してみてください。

希望します。

+1

はまだパネル設定に違反しており、パネルに応じて設定されていない –

0

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>

+0

これはtbodyと完全に一致しませんでした –

+0

この例を使用あなたが望むものを正確に作るため。 fisrt行は固定されていて、何もしたくないのですか? –

+0

ええ、スクロールが最初の行からどのように遅れているのを見たことがありますか? –

関連する問題