用css 給tbody加垂直滾動條

阿新 • • 發佈：2019-01-16

思路就是

1，把tbody設定成display:block，然後就對其高度設定一個固定值，overflow設定成auto。

2，把thead的tr設定成display:block。

3，因為都設定成block所以要給td手動新增寬度 width:200px

程式碼如下：

<table class="table">
                          <thead>
                              <tr>
                                  <th>Id</th>
                                  <th>Name</th>
                                  <th>Category</th>
                                  <th>MonthAmount</th>
                                  <th>hasBackUp</th>
                                  <th>score</th>
                              </tr>
                          </thead>
                          <tbody>
                              <tr>
                                  <td>23</td>
                                  <td>South Bearing</td>
                                  <td>Glass/Material</td>
                                  <td>1234444</td>
                                  <td>TRUE</td>
                                  <td>3456.00</td>
                              </tr>
                              <tr>
                                  <td>23</td>
                                  <td>South Bearing</td>
                                  <td>Glass/Material</td>
                                  <td>1234444</td>
                                  <td>TRUE</td>
                                  <td>3456.00</td>
                              </tr>
                              <tr>
                                  <td>23</td>
                                  <td>South Bearing</td>
                                  <td>Glass/Material</td>
                                  <td>1234444</td>
                                  <td>TRUE</td>
                                  <td>3456.00</td>
                              </tr>
                              <tr>
                                  <td>23</td>
                                  <td>South Bearing</td>
                                  <td>Glass/Material</td>
                                  <td>1234444</td>
                                  <td>TRUE</td>
                                  <td>3456.00</td>
                              </tr>
                              <tr>
                                  <td>23</td>
                                  <td>South Bearing</td>
                                  <td>Glass/Material</td>
                                  <td>1234444</td>
                                  <td>TRUE</td>
                                  <td>3456.00</td>
                              </tr>
                              <tr>
                                  <td>23</td>
                                  <td>South Bearing</td>
                                  <td>Glass/Material</td>
                                  <td>1234444</td>
                                  <td>TRUE</td>
                                  <td>3456.00</td>
                              </tr>
                              <tr>
                                  <td>23</td>
                                  <td>South Bearing</td>
                                  <td>Glass/Material</td>
                                  <td>1234444</td>
                                  <td>TRUE</td>
                                  <td>3456.00</td>
                              </tr>
                              <tr>
                                  <td>23</td>
                                  <td>South Bearing</td>
                                  <td>Glass/Material</td>
                                  <td>1234444</td>
                                  <td>TRUE</td>
                                  <td>3456.00</td>
                              </tr>
                              <tr>
                                  <td>23</td>
                                  <td>South Bearing</td>
                                  <td>Glass/Material</td>
                                  <td>1234444</td>
                                  <td>TRUE</td>
                                  <td>3456.00</td>
                              </tr>
                              <tr>
                                  <td>23</td>
                                  <td>South Bearing</td>
                                  <td>Glass/Material</td>
                                  <td>1234444</td>
                                  <td>TRUE</td>
                                  <td>3456.00</td>
                              </tr>
                              <tr>
                                  <td>23</td>
                                  <td>South Bearing</td>
                                  <td>Glass/Material</td>
                                  <td>1234444</td>
                                  <td>TRUE</td>
                                  <td>3456.00</td>
                              </tr>
                              
                          </tbody>
                      </table>

css

.table thead tr {
	display:block;
}
.table tbody {
	display: block;
	height: 200px;
	overflow: auto;
}
.table th {
	width:20%;
}
 .table td {
    width:20%;
 }

用css 給tbody加垂直滾動條

思路就是 1，把tbody設定成display:block，然後就對其高度設定一個固定值，overflow設定成auto。 2，把thead的tr設定成display:block。 3，因為都設定成block所以要給td手動新增寬度 width:200px 程式碼如下：

用 Python 給程序加個進度條，讓你的看起來更炫酷？

image 進度條 hub 一行 ref 當前標準輸出 alt 操作對於開發或者運維來說，使用 Python 去完成一些跑批任務，或者做一些監控事件是非常正常的情況。那麽如何有效地監控任務的進度？除了在任務中加上 Log 外，還能不能有另一種方式來了解任務進展到哪一步了

移動端tabbar按鈕滑動（給div加橫向滾動條）

手寫程式碼乾貨，已測試（請在移動端中開啟除錯） <!DOCTYPE html> <html> <head> <title>底部tabbar欄滑動</title> <script type="text/ja

python3中給listbox新增垂直滾動條和水平滾動條

#scrolly是垂直滾動條，scrolly2是水平滾動條 scrolly=Scrollbar(win,width=25,orient=VERTICAL) scrolly.grid(row=0,column=1,padx=(0,0),pady=(250,0),s

給div加橫向滾動欄，然後去修改滾動條的樣式,以下只給chrome做了相容。

直接上程式碼css:html { font-size: 100px; } .bottomPrizelist-in { float:left; overflow-x:scroll; overflow-y:hidden; width: 3rem; height:

css隱藏垂直滾動條並且不影響滾輪滾動功能以及頁面顯示功能

如果要實現隱藏整個頁面的滾動條(水平滾動條或者垂直滾動條)功能，可能首先想到的是給html或者body元素設定css屬性： &n

Android：給對話方塊AlertDialog新增垂直滾動條

<?xml version="1.0" encoding="utf-8"?> <ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="h

FineUIMvc新特性速遞（大間距模式，隱藏菜單垂直滾動條）

android 密集恐懼癥在線網站先來即將發布的 FineUIMvc 新版本會引入兩個重要的特性，用來提升用戶體驗，現在就來先睹為快吧：大間距模式我們已經支持的顯示模式有：緊湊模式，普通模式，大字體模式。緊湊模式：普通模式：大字體模式（一般適用於移動端顯示，iOS，Androi

jquery easyui datagrid 無滾動條，datagrid 沒垂直滾動條

p s load grid 技術如果 fan 垂直滾動條收藏解決 jquery easyui datagrid 無滾動條，datagrid 沒垂直滾動條 ============================== 蕃薯耀 2018年2月6日 http://www

(轉)iframe 高度100%時，出現垂直滾動條

分析 out border jsb china href -s 詳細 base 問題需求是這樣的，iframe在一個div中，並且iframe高度與div一樣，所以設置了iframe高度是100%，結果div出現了滾動條，在排除了padding、margin的因素外，還是

css實現修改默認滾動條樣式

dtd pointer inter rgb back rbo trac 整體 rgba <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>

MFC中Edit控制元件垂直滾動條時，當文字超出時再顯示垂直滾動條

現在我需要實現這樣一個功能：想要用edit控制元件本身的滾動條，並且設定該屬性，但是該滾動條會一直存在。效果如下圖，很是難看，當沒有輸入資訊時，也會出現垂直滾動條其實，只有在文字超過設定的區域內才會顯示（在這我不知道如何上傳動態效果圖片，

SWT帶垂直滾動條的Text自動滾動到底部比如顯示聊天資訊

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

《碼農翻身》用故事給技術加點料

這本書以故事的形式講解一些技術詞彙，總的還是比較適合理解和閱讀的，不懂的人理解更簡單，原本就理解的人就學會一種講述的方法。能通俗易懂、形像生動的把專業東西讓小白明白，是一件很不錯的事。因為本人沒搞Java，也就把第2章大部份跳過了，，似乎作者應該是學Java的吧。聯絡到最近希望給家裡

ext6.2 如何給樹選單新增滾動條

使用extjs6官方模板admin-dashboard的話直接在main.js 裡直接加滾動條的屬性 autoScroll:true,containerScroll : true, 是不管用的，方法如下：xtype：mainContainerWrap 這個替換成下

html自定義的DIV垂直滾動條

首先說一下自定義滾動條的一個要求：滑鼠滾動在它div上滾動時，如果沒有滾到頂端或底部則不能影響頁面滾動條和系統自帶一樣讓一個div擁有滾動條 1、只有垂直滾動條 #mydiv1 { position: relative; overflow-x: hid

如何在DIV內只要垂直滾動條，不要水平滾動條

<DIV style="OVERFLOW-Y: scroll; OVERFLOW-X:hidden; width: 685px; height: 180px"><DIV> 說明: overflow-y: scroll - 有垂直滾動條

純 css 實現 PC 端無滾動條滾動樣式分享

由於接觸過各種後臺管理平臺開發，我們的開發介面一般左側導航欄，右側內容區域。在左側呢一旦超出高度在不同的瀏覽器就會顯示滾動條。嚴重影響頁面美觀。在這裡呢主要是講的css實現 PC 端無滾動條滾動樣式。下面直接上程式碼：html：<div class="box-wrapp

MFC對話方塊程式EDIT類控制元件的自動換行，垂直滾動條自動下移

1.新建一個Edit Control,將其Multiline屬性設定為True,Auto HScroll屬性設定False,這樣就可以實現每一行填滿後自動換行了。2.再將Vetrical Scroll屬性設定為True，當輸入或顯示超過編輯框的大小後就會出現垂直滾動條

easyui datagrid 表頭固定（垂直滾動條）、列固定（水平滾動條）

easyui datagrid 表頭固定（垂直滾動條）、列固定（水平滾動條），每頁顯示1000行最近用多了easyui 之後還是覺得它的功能還是很強大的。它原有的功能就已經能夠滿足90%以上的介面需求。 1、當資料行很多時，會呈現垂直的滾動條，但是向下滾動，表頭卻被淹沒了，這不符合人類偷懶

用css 給tbody加垂直滾動條

相關推薦