滚动到 tbody

【问题标题】：Scroll for tbody滚动到 tbody
【发布时间】：2017-07-24 18:48:46
【问题描述】：

我正在尝试获取 tbody 的卷轴，但没有成功。

如果我将显示块放在 thead 和 tbody 上，那么我可以实现滚动到 tbody 但随后 thead 和 tbody 的对齐会失真。

<table style="width:100%">
  <thead style="background-color: #d9edf7;">
    <tr>
      <th class="info">Line#</th>
      <th class="info">Product</th>
      <th class="info" style="display:{!if(isLApprovedRC,'none','')};">Last Approved <br>MRC</th>
      <th class="info" style="display:{!if(isLApprovedNRC,'none','')};">Last Approved <br>NRC</th>
      <th class="info">Approved MRC</th>
      <th class="info">Approved NRC</th>
      <th class="info" style="display:{!if(UsageVisibleUI,'none','')}">Usage Charge</th>
      <th class="info" style="display:{!if(isVisible1,'none','')}">Approved Burst <br>Rate</th>
      <th class="info" style="display:{!if(isVisible1,'none','')}">Approved China <br>Burst Rate</th>
      <th class="info" style="display:{!if(IsAccessible,'','none')}">Cost MRC</th>
      <th class="info" style="display:{!if(IsAccessible,'','none')}">Cost NRC</th>
      <th class="info" style="display:{!if(IsAccessible,'','none')}">Margin(%)</th>
      <th>&nbsp;</th>
    </tr>
  </thead>

  <tbody style="height: 450px;overflow: auto;">
    <tr>
      <td class="info">1</td>
      <td class="info" style="word-wrap:break-word;">Product Informa</td>
      <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
      <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
      <td>
        100.2
      </td>
      <td>
        100.2
      </td>

      <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
      </td>
      <td style="display:{!if(isVisible1,'none','')}">
        100.2
      </td>
      <td style="display:{!if(isVisible1,'none','')}">
        100.2
      </td>
      <td style="display:{!if(IsAccessible,'','none')}">
        100.2
      </td>
      <td style="display:{!if(IsAccessible,'','none')}">
        100.2
      </td>
      <td style="display:{!if(IsAccessible,'','none')}">100.2</td>
      <td></td>
    </tr>
  </tbody>
</table>

我把它放在小提琴下面。请帮忙

Fiddle

【问题讨论】：

  • 这是什么：style="display:{!if(isLApprovedRC,'none','')};"？此外，您可以将其设为Stack Snippet，这样我们甚至不需要转到其他网站。
  • 那是业务逻辑...... tbody 上的一些 th 和 tr 是有条件的......下次会尝试这个......但如果你检查你会看到结构......跨度>

标签： html css


【解决方案1】：

你可以看到下面的代码。您必须在 tr 和 tbody 上添加 css 我已在代码片段中添加并从表中删除内联样式 tbody

.a th, td{
  padding: 8px;
  border: 1px solid gray; 
}
.a thead th, .a tbody tr{ display:table; width:100%}

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

tbody{
  overflow-y: scroll;      
  height: 200px;        /*   <---- Select the height of the body */
  width: 100%;
  position: absolute;
}
<table style="width:100%">
			<thead style="background-color: #d9edf7;">
			<tr>
					<th class="info">Line#</th>
                    <th class="info">Product</th>
                    <th class="info" style="display:{!if(isLApprovedRC,'none','')};">Last Approved <br>MRC</th>
                    <th class="info" style="display:{!if(isLApprovedNRC,'none','')};">Last Approved <br>NRC</th>
                    <th class="info">Approved MRC</th>
                    <th class="info">Approved NRC</th>
                    <th class="info" style="display:{!if(UsageVisibleUI,'none','')}">Usage Charge</th>
                    <th class="info" style="display:{!if(isVisible1,'none','')}">Approved Burst <br>Rate</th>
                    <th class="info" style="display:{!if(isVisible1,'none','')}">Approved China <br>Burst Rate</th>
                    <th class="info" style="display:{!if(IsAccessible,'','none')}">Cost MRC</th>
                    <th class="info" style="display:{!if(IsAccessible,'','none')}">Cost NRC</th>
                    <th class="info" style="display:{!if(IsAccessible,'','none')}">Margin(%)</th>
                    <th>&nbsp;</th>
		  </tr>
		  </thead>
           
                <tbody style="">
                    <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
                           <tr>
                            <td class="info">1</td>
                            <td class="info" style="word-wrap:break-word;">Product Informa</td>
                            <td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
                            <td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
                            <td>
                           100.2
                            </td>
                            <td>
                         100.2
                            </td>

                            <td style="display:{!if(UsageVisibleUI,'none','')}">100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}"> 
                           100.2
                            </td>
                            <td style="display:{!if(isVisible1,'none','')}">
                           100.2
                            </td>
                            <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td>
                             <td style="display:{!if(IsAccessible,'','none')}">
                           100.2
                            </td> 
                            <td style="display:{!if(IsAccessible,'','none')}">100.2</td> 
                            <td></td>                                                       
                        </tr> 
           
                     
                   
                </tbody>
            </table>

【讨论】：

  • 感谢 bharat 的回复……这当然对我有帮助。我又遇到了一个问题，不是 tfoot 在此更改后中断。请查找更新的小提琴...jsfiddle.net/m35ftwwa/1
  • @Akki619 请检查小提琴，jsfiddle.net/bharat_patidar/tcdfayba 你只需要在你的页面中更新这个tfoot &gt; tr{ margin-top:450px; } css。您可以根据您的页面更改页边距。
猜你喜欢
  • 1970-01-01
  • 2011-07-17
  • 1970-01-01
  • 2013-06-03
  • 2020-06-27
  • 2014-11-17
  • 2012-10-01
  • 1970-01-01
  • 2021-06-12
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode