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

【问题标题】：HTML table with fixed header , scroll bar and dynamic height具有固定标题、滚动条和动态高度的 HTML 表格
【发布时间】：2017-10-03 19:34:29
【问题描述】：

我有一个问题已经回答了很多次，但我的要求是定制的，我想要一个 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;
}

【问题讨论】：

您希望我们为您制作？？
这不是一个编码服务——请解释一下你到目前为止所做的尝试，并展示一些代码。
您的问题中没有代码，所以请用您尝试过的代码更新您的问题
现在建议我是否有任何解决方案

标签： javascript jquery css html

【解决方案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

【讨论】：