具有固定标题，滚动条和动态高度的HTML表格

Question

我有一个已经回答了很多次的问题，但是我的需求是自定义的，我想要一个带有固定标题和动态高度的HTMl表格以及更多记录的滚动条小于10

I want horizontal scroll bar if table size increases more than 100% width. 
Vertical scroll bar needed if table has records more than 10 . 
But if table has less than 10 records than the size of the table 
should not be fixed up to 10 rows. 
I found lots solutions but table height is being fixed there to achieve scroll. 

下面是我的HTML代码

<div class="table-responsive custom-table-responsive"> 
       <table id="demo_datatables" class="table table-bordered table-striped stripe hover row-border"> 
       <thead class ="div-head" > 
    <tr> 
    <th><b>Stage</b></th> 
    <th><b>Site</b></th> 
    <th><b>Resource Name</b></th> 
    <th><b>APS Relevant</b></th> 

    </tr> 
    </thead> 

      <tbody> 


       <tr> 
       <td>1</td> 
       <td>2</td> 
       <td>3</td> 
       <td>4</td> 
       </tr> 
       <tr> 
       <td>1</td> 
       <td>2</td> 
       <td>3</td> 
       <td>4</td> 
       </tr> 
       <tr> 
       <td>1</td> 
       <td>2</td> 
       <td>3</td> 
       <td>4</td> 
       </tr> 
       <tr> 
       <td>1</td> 
       <td>2</td> 
       <td>3</td> 
       <td>4</td> 
       </tr> 


       </tr> 

    </tbody> 


     </table> 
       </div> 

     </div> 




    And CSS Used here is as below 

    .custom-table-responsive { 
    overflow: auto; 
    height: 400px; 
} 

Answer 1

今天，我有一个很好的一天，记住，我最近回答了这样一个问题。

这很容易与CSS。

table{ 
     width: 500px; 
    } 

    th, td { 
    text-align: center; 
    min-width:200px; 
    } 

    td:nth-child(1), th:nth-child(1) { 
     min-width: 100px; 
    } 

    thead { 
     background-color: #000; 
     color: #fff; 
    } 

    thead tr { 
     display: block; 
     position: relative; 
    } 

tbody { 
    display: block; 
    overflow: auto; 
    overflow-x:hidden; 
    width: 100%; 
    height: 150px; 
} 

tbody tr:nth-child(even) { 
    background-color: #dddddd; 
} 

play with the sourece: JSBIN