Tbody滾動解決方案。大量的行增加頁面高度

我試圖實現跨瀏覽器兼容的tbody滾動解決方案。這差不多讓我那裏。我擁有的最後一道障礙是我體內的行數非常大的情況。所有內容都可以正確滾動，但儘管隱藏了溢出，但我的tbody的孩子也會添加到頁面的高度。Tbody滾動解決方案。大量的行增加頁面高度

示例圖片：http://i.imgur.com/sHWldYg.png

我不想在第三方解決方案來拉，我相信這個解決方案可以使大部分的瀏覽器工作。任何/所有的幫助表示讚賞。我也開放給其他tbody滾動解決方案（雖然，我看了不少）。

編輯：在@ cimmanon的請求中交換了編譯後的SASS for CSS。

// HTML

 <div class="tbody-scroll tbody-scroll--five-col"> 
      <div class="inner-container"> 

       <div class="table-header"> 
        <table> 
         <thead> 
          <tr> 
           <th data-field='Verified'> 
            <input type="checkbox" id="testAll" /> 
            <label for="testAll"></label> 
           </th> 
           <th data-field='Name'>Name</th> 
           <th data-field='Web'>Part #</th> 
           <th data-field='Twitter'>Mfg Part #</th> 
           <th data-field='Id'>Cost</th> 
           <th></th> 
          </tr> 
         </thead> 
        </table> 
       </div> 

       <div class="table-body"> 
        <table> 
         <tbody> 
          <tr> 
           <td data-field='Action'> 
            <input type="checkbox" id="test1" /> 
            <label for="test1"></label> 
           </td> 
           <td data-field='Name'>Scanner Dongle</td> 
           <td data-field='Part Number'>12093475214-WW</td> 
           <td data-field='Mfg Part Number'>WOT-232</td> 
           <td data-field='Cost'>$23</td> 
          </tr> 
          <tr> 
           <td data-field='Action'> 
            <input type="checkbox" id="test2" /> 
            <label for="test2"></label> 
           </td> 
           <td data-field='Name'>Printer Paper</td> 
           <td data-field='Part Number'>1204341232-Z232</td> 
           <td data-field='Mfg Part Number'>XXT-19</td> 
           <td data-field='Cost'>$5</td> 
          </tr> 
          ... 
         </tbody> 
        </table> 
       </div> 

      </div> <!-- /inner-container --> 
     </div> <!-- /tbody-scroll -->

// CSS

.tbody-scroll { 
     width: 100%; 
    } 
    .tbody-scroll .inner-container { 
     overflow: hidden; 
    } 
    .tbody-scroll .table-header { 
     position: relative; 
     background: #546775; 
     margin: 1rem auto 0 auto; 
    } 
    .tbody-scroll .table-body { 
     overflow-y: scroll; 
     border: 1px solid #aaaaaa; 
    } 
    .tbody-scroll table { 
     font-size: 1rem; 
     width: 100%; 
     border-collapse: collapse; 
     border-top: 0 none; 
    } 
    .tbody-scroll tbody { 
     overflow: hidden; 
    } 
    .tbody-scroll tr { 
     line-height: 1em; 
     border-bottom: 1px solid rgba(0, 0, 0, 0.2); 
    } 
    .tbody-scroll tr:last-child { 
     border-bottom: none; 
    } 
    .tbody-scroll tr.striped { 
     background-image: url(/styles/images/stripe4.png); 
    } 
    .tbody-scroll th, 
    .tbody-scroll td { 
     width: 20%; 
     padding: 1.33333em 1.77778em; 
     line-height: 1.77778em; 
    } 
    .tbody-scroll th:last-child, 
    .tbody-scroll td:last-child { 
     border-right: 0 none; 
    } 
    .tbody-scroll--four-col th, 
    .tbody-scroll--four-col td { 
     width: 25%; 
    } 
    .tbody-scroll--five-col th, 
    .tbody-scroll--five-col td { 
     width: 20%; 
    } 
    .tbody-scroll--six-col th, 
    .tbody-scroll--six-col td { 
     width: 16.66666%; 
    } 
    .tbody-scroll th { 
     letter-spacing: 0.31641em; 
     text-transform: uppercase; 
     font-weight: 400; 
     font-size: 1em; 
     text-align: left; 
     color: #ffffff; 
    } 
    .tbody-scroll th:last-child { 
     display: block; 
     padding: 0; 
     margin: 0; 
     height: 10px; 
     width: 19px; 
    }

// JS

 $(document).ready(function() { 
      setTableBody(); 
      $(window).resize(setTableBody); 
     }); 

     function setTableBody() 
     { 

      var halfViewport = (($(window).height() * 50)/100); // 50vh 
      console.log("resizing... " + halfViewport); 
      $(".table-body").height(halfViewport); 
     }

來源

2015-09-08 Daniel Brown

除非您有Sass-> CSS編譯問題，否則只發布編譯後的CSS。 – cimmanon

@cimmanon - 謝謝你的擡頭。交換了CSS的SASS –

您是否嘗試添加'<！DOCTYPE html>'，如[見] [http://stackoverflow.com/a/12902057]？ – uri2x

使用Chrome的檢查，我注意到，對於「計算」的價值我<table>元素position財產被設置爲static

切換：

.tbody-scroll table { 
    font-size: 1rem; 
    width: 100%; 
    border-collapse: collapse; 
    border-top: 0 none; 
}

要：

.tbody-scroll table { 
    font-size: 1rem; 
    width: 100%; 

    position: relative; 

    border-collapse: collapse; 
    border-top: 0 none; 
}

的伎倆。沒有更大的空白空間造成overflow: hidden錶行。值得一提的是，該解決方案似乎適用於所有邊緣瀏覽器版本。

感謝所有花時間看&評論！

來源

2015-09-08 19:52:45

Tbody滾動解決方案。大量的行增加頁面高度

回答

相關問題