2. 程式人生 > >解決table中固定，只有列表資料滾動的問題

解決table中固定，只有列表資料滾動的問題

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

找了好久才找到一篇可以簡單粗暴就能用的，所以拿過來算是收藏了。裡面有一個css2裡的命令是我沒用過的也是這裡面關鍵的：table-layout:fixed;

原理很簡單，有愛研究的童鞋可以去css官網看看說明文件。

直接貼程式碼：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>轉載自·威易網CSS教程</title>
<style>
table tbody {
display:block;
height:195px;
overflow-y:scroll;
}

table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}

table thead {
width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}
</style>
</head>

<body>
<table width="80%" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>出生年月</th>
<th>手機號碼</th>
<th>單位</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張三封</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴與四十大盜</td>
</tr>
<tr>
<td>張小三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>騰訊科技</td>
</tr>
<tr>
<td>張三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>瀏陽河就業</td>
</tr>
<tr>
<td>張三瘋子</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張大三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張三五</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張劉三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
</tbody>
</table>
</body>

</html>

轉自部落格網

相關推薦

解決table中固定，只有列表資料滾動的問題

找了好久才找到一篇可以簡單粗暴就能用的，所以拿過來算是收藏了。裡面有一個css2裡的命令是我沒用過的也是這裡面關鍵的：table-layout:fixed; 原理很簡單，有愛研究的童鞋可以去css官網看看說明文件。 直接貼程式碼： <!DOCTYPE HTML

移動端中固定的底部列表會隨著頁面滑動該如何處理

固定 ID function 頁面滑動 列表 ide fun () 元素 var h=$(window).height(); $(window).resize(function() { if($(window).height()&l

VS2013無法載入解決方案中專案，提示未能正確載入解決方案中的一個或多個專案

現象：開啟一個工程，上午還能正常操作，下午就打不開了。試了所有的工程都打不開。 提示： 未能正確載入解決方案中的一個或多個專案 解決辦法： 1、關閉VS； 2、去C:\Users\AppData\Local\Microsoft\VisualStudio\12.0\ComponentMod

解決JAVA中JLable，JButton不能換行的問題

直接放程式碼，解釋看註釋 編寫一個方法將string轉化為html，多長（length）換自己設定 /** *莫言情難忘 1179307527 *建議將此main轉為static方法，即可達到換行的目的 *其中，變數為str與length */ public class text {

vue 爬坑 之js 物件/陣列 賦值/拷貝 解決VUE中賦值引用後資料雙向改變的問題

淺拷貝這裡就不講了，我們直接講深拷貝 正常的陣列/物件拷貝可以直接用 const cloneObj = JSON.parse(JSON.stringify(Obj)); 這種方式可以解決相當多一部分的賦值問題，但是一些特殊屬性除外（undefined/function）

解決vue中模態框內資料和外面的資料繫結的問題

問題：表單中的使用者名稱和模態框中的使用者名稱沒有繫結同一個model，但之後在模態框捏輸入發現表單內的使用者名稱也發生了改變。原本計劃是想點儲存之後再改變的。解決方法找到判斷模態框是否顯示的變數。之後用watch監聽該屬性。然後就不會發生上述問題。表單：<el-tab

Android中ListView實現展示列表資料

1、在activity_main.xml中新增一個ListView <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://sc

解決Java中POI匯入Excel表格資料時 日期格式資料解析錯誤的問題

用POI匯入excel資料時，日期格式（如2018/7/7）資料預設會被解析成double格式，解決方法如下： package com.test.util; import java.text.DateFormat; import java.text.SimpleDate

解決VS2012中沒有ado.net實體資料模型（ADO.NET entity data model）的問題

      我使用的是VS2012旗艦版，但是一直在“新建專案”中找不到“ADO.NET實體資料模型” 這個選項，嘗試了網路上的各種方法，包括安裝entity framework，重置模板，甚至重新安裝vs2012，都沒有解決，後來在一個英文論壇上找到了解決辦法。 上圖可

Domain Adaptive Faster R-CNN：經典域自適應目標檢測演算法，解決現實中痛點，程式碼開源 | CVPR2018

> 論文從理論的角度出發，對目標檢測的域自適應問題進行了深入的研究，基於H-divergence的對抗訓練提出了DA Faster R-CNN，從圖片級和例項級兩種角度進行域對齊，並且加入一致性正則化來學習域不變的RPN。從實驗來看，論文的方法十分有效，這是一個很符合實際需求的研究，能解決現實中場景多樣

頭部和底部固定，中間內容可滾動

html+css的程式碼的展示<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><

表頭固定，內容可以上下左右滾動，左右滾動表頭聯動

準備工作                 xxx.html css:   reset.min.css         style.css js:      index.js                  jquery.min.js 一、xxx.html(內容部分多填

(MySql的亂碼解決)關於相同sql指令在eclipse中查詢不到結果，在mysql中卻能查詢到結果，以及增加資料時列表顯示“？”解決方案

在最初使用jdbc連線資料庫時，大家一定經常遇到一下兩個問題： 1、相同sql指令在eclipse中查詢不到結果，在mysql中卻能查詢到正確結果。 2、在增加列表資料時，雖然能夠增加成功，但增加的資料中文全部變成了“？” 下面將為大家解決這兩個問題。 這兩個問題其實都是編碼不同導致

關於相同sql指令在eclipse中查詢不到結果，在mysql中卻能查詢到結果，以及增加資料時列表顯示“？”解決方案

在最初使用jdbc連線資料庫時，大家一定經常遇到一下兩個問題： 1、相同sql指令在eclipse中查詢不到結果，在mysql中卻能查詢到正確結果。 2、在增加列表資料時，雖然能夠增加成功，但增加的資料中文全部變成了“？” 下面將為大家解決這兩個問題。 這兩個問題其實

微信小程序開發過程中踩過的坑集合，沒有解決不了的錯誤，只有踩不完的坑

pac 清除 bind ren 透明 .json 配置 reac 之間 微信小程序開發過程中踩過的坑，包含很多小程序開發細節，有些可能你也踩過。。。1、height:auto; 失效，必須指定 image 的高度為具體數值,不然高度為0。2、真機和模擬器的問題總結 inp

位運算解決“一個數組中，只有一個數字出現n次，其他數字出現k次”問題

不重復 blog ron 運用 ons 利用 缺失 tail 位運算符 轉自：https://blog.csdn.net/monster_girl/article/details/52928864 在學習完位操作後，經常會遇到一類關於查找缺失整數的問題。 第一類是給你一個

HTML怎麼讓table中的td內容過長顯示為固定長度，多餘部分用省略號代替

HTML如何讓table中的td內容過長顯示為固定長度，多餘部分用省略號代替 這個問題呢，是由於我們公司測試的部門測出來的，雖然說測試的內容本身就是個BUG，不過這個也讓我學到了一個比較好的歸類於佈局的一個小技巧，就是將td標籤中過長的內容只顯示為這個td的width的長度，之後的便以省略號

解決EasyUi中的DataGrid刪除一條記錄後，被刪除的資料仍處於被選中狀態問題

專案中遇到這麼一個問題，在easyui的datagrid中，刪除一條記錄成功，重新載入datagrid後，去點編輯操作，仍可把之前刪除掉的那條記錄進行編輯操作，正常情況應該是，刪除後再去點選“編輯”，應提示沒有被選中的記錄。現在這個情景說明，在datagrid刪除資料重新載入後，當datagrid呼叫getS

解決js中分頁模組，分頁列表，怎麼做

最近工作中在做一個分頁列表的一個東西，要求在js中寫，不多比比，直接上關鍵程式碼 htmlText=htmlText+'<div class="page">'; //重寫分頁列表 //一頁的內容 var pageSize = parse

bootStarp Table 中的queryParams 和解決後端接收不到資料的問題

在使用bootStarp Table 的時候，會存在頁面重新整理的情況，所以就提供了queryParams的函式，在boot Strap Table的api中是這樣介紹的 請求伺服器資料時，你可以通過重寫引數的方式新增一些額外的引數，例如 toolbar 中的引數 如果 queryParamsT