Question

我想修复我的表格的标题，因此在向下滚动时它总是可见的。我桌子的高度固定为500像素这是一个傻瓜： enter link description here

 <table class="table table-striped table-bordered">
  <thead>
      <tr>
          <th style="text-align:center">Produit</th>
          <th style="text-align:center">Emballage</th>
          <th style="text-align:center">Certificat Fourn.</th>
          <th style="text-align:center">Marque</th>
          <th style="text-align:center">Catégorie</th>
          <th style="text-align:center">Calibre</th>
          <th style="text-align:center" colspan="3">20/03</th>
          <th style="text-align:center" colspan="3">21/03</th>
          <th style="text-align:center" colspan="3">22/03</th>
          <th style="text-align:center" colspan="3">23/03</th>
      </tr>
      <tr>
        <th colspan="6"></th>
        <th>Rsr</th>
        <th>Arr</th>
        <th>Dsp</th>
        <th>Rsr</th>
        <th>Arr</th>
        <th>Dsp</th>
        <th>Rsr</th>
        <th>Arr</th>
        <th>Dsp</th>
        <th>Rsr</th>
        <th>Arr</th>
        <th>Dsp</th>
      </tr>
  </thead>
  <tbody>
      <tr ng-repeat="planning in data">
          <td style="text-align:center">
              {{planning.produit}}
          </td>
          <td style="text-align:center">                                    
              {{planning.emballage}}
          </td>
          <td style="text-align:center">                                    
              {{planning.certificatFournisseur}}
          </td>
          ...

          <td style="text-align:center">
              {{planning.dispJ4}}
          </td>
      </tr>
  </tbody>
</table>

我看过网，但我没有找到任何好的解决方案谢谢你的帮助。

Answer 1

您必须将表拆分为带有标题的表和带有数据的第二个表。然后在滚动时添加javascript（检测标题表的位置是否接近屏幕的0，如果是，则为标题表添加css样式 - ＆gt; position:fixed top:0px ; 您还将有一个反向javascript用于删除位置：当查看器向上滚动时修复。

修改

如果你不在乎从页面丢失表格，你可以使用2个表格（标题和内容）把内容表格的高度= 500px - 标题表格的高度和对于内容的表格overflow:scroll

Answer 2

我找到了一个在我的一张桌子上运作良好的解决方案我试图将它应用到另一个表，但我得到td宽度和宽度之间的差异。我不知道为什么，即使我为每一个设置相同的宽度。

如果有人能向我解释原因......
谢谢！
普兰克：
http://plnkr.co/edit/kDxIYzmO6onqqZcZIURc?p=preview

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div>
      <table class="table table-bordered table-hover" style="font-size:11px;table-layout: fixed; margin-bottom:0px">
        <thead>
          <tr>
            <th style="text-align:center;width:168px">Fournisseur</th>
            <th style="text-align:center;width:148px">Désignation</th>
            <th style="text-align:center;width:81px">Date</th>
            <th style="text-align:center;width:53px">Colis</th>
            <th style="text-align:center;width:53px">Brut</th>
            <th style="text-align:center;width:53px">Tare</th>
            <th style="text-align:center;width:78px">Poids net</th>
            <th style="text-align:center;width:58px">Pièces</th>
            <th style="text-align:center;width:68px">Palette</th>
            <th style="text-align:center;width:53px">Valo</th>
            <th style="text-align:center;width:98px">Prix unit ht</th>
            <th style="text-align:center;width:58px">H.T.</th>
            <th style="text-align:center;width:58px">Tva</th>
          </tr>
        </thead>
      </table>
      <div class="wrap_scrollable">
        <div class="scrollable">
          <table class="table table-bordered" style="font-size:11px;table-layout: fixed">
            <tbody>
              <!-- ngRepeat: frais in listeFrais -->
              <tr >
                <td style="text-align:center;width:168px;word-wrap: break-word" class="ng-binding">ALIMEA</td>
                <td style="text-align:center;width:148px;word-wrap: break-word" class="ng-binding">Triage</td>
                <td style="text-align:center;width:81px;word-wrap: break-word" class="ng-binding">2015-04-01</td>
                ...
               <td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">-50</td>
                <td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">0</td>
              </tr>
              <!-- end ngRepeat: frais in listeFrais -->
              <tr>
                <td style="text-align:center;width:168px;word-wrap: break-word" class="ng-binding">ALBA BIO COOP</td>
                <td style="text-align:center;width:148px;word-wrap: break-word" class="ng-binding">Triage</td>
                <td style="text-align:center;width:81px;word-wrap: break-word" class="ng-binding">2015-04-01</td>
                ...
                <td style="text-align:center;width:98px;word-wrap: break-word" class="ng-binding">2</td>
                <td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">-20</td>
                <td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">0</td>
              </tr>
              <!-- end ngRepeat: frais in listeFrais -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>

</html>

修复我的表格标题

2 个答案:

修改