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

Posted 2023-05-07

【中文标题】具有固定标题、滚动条和动态高度的 HTML 表格

【英文标题】：HTML table with fixed header , scroll bar and dynamic height

【发布时间】：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;

【问题讨论】：

您希望我们为您制作？？

这不是一个编码服务——请解释一下你到目前为止所做的尝试，并展示一些代码。

您的问题中没有代码，所以请用您尝试过的代码更新您的问题

现在建议我是否有任何解决方案

【参考方案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