修復CSS表溢出和樣式化滾動條[與JS斌]

Question

我想添加表滾動的表體，但我不能得到標題排列與列。

我也想將滾動條放置在表格中而不覆蓋單元格中的任何文本。

期待在工作中看到一些天才。我正在靠牆敲打我的頭。

下面的代碼：JSBin

CSS

tr { 
    width: 100%; 
    height:20px; 
    //table-layout: fixed; 
} 
table { 
    height: 220px; 
    white-space: nowrap; 
    border-collapse: collapse; 
} 
tbody { 
    overflow-y: scroll; 
    height: 200px; 
    width: 100%; 
    position: absolute; 
} 
th, td { 
    border: solid 1px #ccc; 
    padding: 2px; 
} 

Answer 1

表不滾動。你必須把它們放在一個div中。

由於position：absolute對於tbody而言，列沒有排隊 - 我認爲這是將tbody更改爲常規塊級div，其中包含一個表格，最終將其包裝在表格單元格中。

從你的CSS中移除了一堆其他東西，如寬度：在tr上100％。 tr的寬度始終爲100％。

不知道寬度：50％對.fluid會有什麼影響。在比你的桌子寬的窗戶上測試它，並且比你的桌子要窄。

table { 
 
    white-space: nowrap; 
 
    border-collapse: collapse; 
 
} 
 

 
th, td { 
 
    border: solid 1px #ccc; 
 
    padding: 2px; 
 
} 
 

 
.fixed { 
 
    min-width: 300px 
 
} 
 

 
.fluid { 
 
    width: 50%; 
 
} 
 

 
#scrollbar::-webkit-scrollbar-track { 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 
 
    border-radius: 10px; 
 
    background-color: #F5F5F5; 
 
} 
 

 
#scrollbar::-webkit-scrollbar { 
 
    width: 8px; 
 
    background-color: #F5F5F5; 
 
} 
 

 
#scrollbar::-webkit-scrollbar-thumb { 
 
    border-radius: 20px; 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); 
 
    background-color: #D62929; 
 
}

<div style="height: 200px; overflow-y:scroll" id=scrollbar> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th class="fluid">First Column</th> 
 
     <th class="fixed">Fixed Column</th> 
 
     <th class="fluid">Third Column</th> 
 
     </tr> 
 
    </thead> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ads</td> 
 
     <td>ads</td> 
 
     <td>332113232</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

我已經把滾動條在表和固定頭黑客格在透明頭。

只有1個錯誤，如果調整過小，標題文本會從表格末尾移開。否則看起來不錯。

我不認爲這樣的事情會如此困難。

JS Bin或運行下面的代碼段。

html, body{ 
 
    padding:20; 
 
    font-family: "Arial", Helvetica, sans-serif; 
 
    
 
} 
 
section { 
 
    position: relative; 
 
    border: 1px solid #b3d5d6;  /*outer border*/ 
 
    padding-top: 25px;    /*header height*/ 
 
    background: #b3d5d6;   /*header color*/ 
 
} 
 
.container { 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    height: 250px;     /*table height*/ 
 
} 
 
table { 
 
    cursor: pointer; 
 
    white-space: nowrap; 
 
    border-collapse: collapse; 
 
} 
 
td + td { 
 
    border-left:1px solid #eee; /*cell column seperator*/ 
 
} 
 
td, th { 
 
    font-size: 13px; 
 
    border-bottom:1px solid #eee; /*cell row seperator*/ 
 
    color: #000;     /*text color*/ 
 
    padding: 2px 10px;    /*cell padding*/ 
 
} 
 
tr:nth-child(odd) {    /*alternate cell colors*/ 
 
    background: #FFFFFF; } 
 
tr:nth-child(even) { 
 
    background: #F6FAFA; } 
 
th {        /*hidden header*/ 
 
    height: 0; 
 
    line-height: 0; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    color: transparent; 
 
    border: none; 
 
    white-space: nowrap; 
 
} 
 
th div{ 
 
    position: absolute; 
 
    background: transparent; 
 
    color: #000;     /*header color*/ 
 
    padding: 5px 10px;   /*header alignment*/ 
 
    top: 0; 
 
    margin-left: -10px; 
 
    line-height: normal; 
 
    border-left: 1px solid #fff; /*header column seperator*/ 
 
} 
 
th:first-child div{ 
 
    border: none; 
 
} 
 
tr:hover td { 
 
    background: linear-gradient(#91bbbc, #d6e6e6 5%, #d6e6e6 95%, #91bbbc); 
 
} 
 
.fixed { 
 
\t min-width: 200px; 
 
} 
 
.fluid { 
 
\t width: 50%; 
 
} 
 

 
#scrollbar::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t border-radius: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#scrollbar::-webkit-scrollbar 
 
{ 
 
\t width: 8px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#scrollbar::-webkit-scrollbar-thumb 
 
{ 
 
\t border-radius: 20px; 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
 
\t background-color: #7997a1; 
 
}

<section class=""> 
 
    <div class="container" id="scrollbar"> 
 
    <table> 
 
     <thead> 
 
     <tr class="header"> 
 
      <th class="fluid"> 
 
      First Column 
 
      <div>First Column</div> 
 
      </th> 
 
      <th class="fixed"> 
 
      Fixed Column 
 
      <div>Fixed Column</div> 
 
      </th> 
 
      <th class="fluid"> 
 
      Third Column 
 
      <div>Third Column</div> 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr>  <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
       <tr> 
 
      <td>ads</td> 
 
      <td>ads</td> 
 
      <td>332113232</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</section>