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

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

1 个答案: