【问题标题】:Fixed the table header with a scrolling panel修复了带有滚动面板的表格标题
【发布时间】:2017-07-11 08:08:21
【问题描述】:

我知道这是一个重复的问题,我已经尝试了所有可能的解决方案,但没有成功。我正在使用一个面板,其中显示了我的 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 列和第 1 行的 for 循环,它将给出标题。我使用了集成的 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:如果对帮助我投反对票,请不要忘记发表评论。干杯!

【问题讨论】:

  • 请添加一个带有工作示例的 jsfiddle 或 sn-p。
  • @P.Frank 如何将来自数据库的 1000 行放入 jsfiddle。我很确定您没有阅读我的问题。
  • 是的,我读了你的例子,但没有看到你的代码很难解决你的问题。不需要粘贴你的 1000 行,只要三个就可以了。只是为了在具体案例中查看您的问题。

标签: php jquery html css frontend


【解决方案1】:

尝试将以下 CSS 添加到您的 .panel-primary:

.panel-primary{
    top: 0;
}

应该这样做。

希望对你有帮助。

【讨论】:

  • 还是打破了面板设置,宽度没有根据面板设置
【解决方案2】:

您可以使用 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(){
		$(".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>

【讨论】:

  • thead 与 tbody 不完全匹配
  • 使用这个例子来制作你想要的东西。第一行是固定的,是你想要的吗?
  • 是的,但是您已经看到卷轴是如何从第一行移到后面的?
  • 是的,因为您的主 div 中有一个填充。如果您按保证金替换它是有效的。请尝试更新的 sn-p
  • 让我在我的代码上检查并尝试一下。并将回复您。 :)
猜你喜欢
  • 1970-01-01
  • 2011-09-25
  • 2017-04-11
  • 1970-01-01
  • 1970-01-01
  • 2013-02-05
  • 2018-01-10
  • 1970-01-01
  • 2012-12-11
相关资源
最近更新 更多