html table表头不变滚动表体

最新推荐文章于 2025-05-02 15:18:39 发布

csdn2014517

最新推荐文章于 2025-05-02 15:18:39 发布

阅读量2.5w

点赞数 2

CC 4.0 BY-SA版权

文章标签： table滚动条问题

本文链接：https://blog.youkuaiyun.com/csdn2014517/article/details/51100894

本文探讨了在网页中创建表格时，如何在不移动表头的情况下实现纵向滚动条的功能。通过使用CSS属性和特定的HTML结构，可以有效解决表格在内容过多时，表头与内容一同滚动的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table 需要出现纵向滚动条时，大多数情况会在table外面包一层div 设置css属性 overflow:auto 来实现table出现滚动条但这样做有个问题，滑动表格是移动整体表头也会被移动。

解决办法有如下

1、设置table 表头和表体

关键css

.table{
            width: 100%;
            border-collapse:collapse; 
            border-spacing:0; 
        }
        .fixedThead{
            display: block;
            width: 100%;
        }
        .scrollTbody{
            display: block;
            height: 262px;
            overflow: auto;
            width: 100%;
        }
        .table td,.table th {
            width: 200px;
            border-bottom: none;
            border-left: none;
            border-right: 1px solid #CCC;
            border-top: 1px solid #DDD;
            padding: 2px 3px 3px 4px
        }

// html代码

<table class="table">
        <thead class="fixedThead">
            <th>header</th><th>header two</th>
        </thead>
        <tbody class="scrollTbody">
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
   
        </tbody>
    </table>

// 3个Table 主、表头、表体

<table width="100%" align="center" border=0>
       <tr>
       <table  width="100%"  border=1>
       <tr>
              <td width="20%">
                     biaoti1321
              </td>
              <td width="20%">
                     biaoti2321321
              </td>
			   <td width="20%">
                     biaoti2321321
              </td>
			  <td width="20%">
                     biaoti2321321
              </td>
			  <td width="20%">
                     biaoti2321321
              </td>
           
       </tr>
       </table>
       </tr>
   <tr>
   <td align="center" width="100%">
    <div  style="overflow-y:auto; width:100%;height:100px">
    <table width="100%" border=1>
       <tr>
              <td>111</td>
              <td>111</td>
			   <td>111</td>
       <td>111</td>
			   <td>111</td>
       </tr>
              <tr>
              <td>111</td>
              <td>111</td>
			   <td>111</td>
             <td>111</td>
			   <td>111</td>
       </tr>                
   </table>

存在一个问题如果表头个数为奇数时不好设置td宽度百分比