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