Question

我知道这是一个重复的问题，我已经尝试了所有可能的解决方案，但没有成功。我正在使用一个面板，其中显示我的Excel数据，我想修改列，换句话说标题。我试过的每一个css打破了面板设置，但我没有成功。我正在使用bootstrap css＆amp;有超过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行是for循环，它将给出标题。我使用了集成的php-html。其他行将出现在row 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：请不要忘记在投反对票帮助我的情况下发表评论。干杯！

Answer 1

尝试将以下CSS添加到.panel-primary：

.panel-primary{
    top: 0;
}

这应该这样做。

希望它有所帮助。

Answer 2

您可以使用 Jquery 进行此操作。我检查每个td的宽度，以定义每个th宽度。

＆＃13;

$(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(){
		$(".info").offset({top:58})
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

使用滚动面板修复了表头

2 个答案: