css3實現固定表格頭部而無需設定單元格td的寬度

阿新 • • 發佈：2018-12-10

背景

最近小弟在工作都是做後臺系統，一堆的表格，各種各樣的。然後需求上要有固定的表頭的表格，如下圖所示

table-thead-fixed

在網上查詢固定表頭的實現方式為：

thead 設定為 fixed
拆分表格為兩個表格 thead一個，tbody一個

然而上面的實現上有個條件是*要提前設定單元格的大小 *，如果沒有設定對的會就是下面這個樣子（下面是其它的博主的例子圖，我盜用下 :smirk: ）

:expressionless::expressionless::expressionless::expressionless: 我可不要固定單元格寬度

，固定的寬度怎麼做組作啊。。。

在css3中的transform不會改變原來元素的大小位置，相當於是複製了份出來，然後transform的計算速也夠快（這裡婊一下absolute加left ，top，經常慢半拍）。用這個做這個功能非常合適，還要加點js用於監聽滾輪。

實現方式

執行我寫的線上例子 打不開，請使用科學上網*:smirk::smirk::smirk:

下面貼下程式碼

js:

// Code goes here
'use strict'
window.onload = function(){
  var tableCont = document.querySelector('#table-cont')
  /**
   * scroll handle
   * @param {event} e -- scroll event
   */
  function scrollHandle (e){
    console.log(this)
    var scrollTop = this.scrollTop;
    this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
  }

  tableCont.addEventListener('scroll',scrollHandle)
}

css:

/* Styles go here */

.table-cont{
  /**make table can scroll**/
  max-height: 200px;
  overflow: auto;
  /** add some style**/
  /*padding: 2px;*/
  background: #ddd;
  margin: 20px 10px;
  box-shadow: 0 0 1px 3px #ddd;
}
thead{
  background-color: #ddd;
}

html：

<!DOCTYPE html>
<html>

  <head>
    <link data-require=" 
[email protected]*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
  <div class='table-cont' id='table-cont'><!--看這裡-->

   <table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>
  </body>

</html>

table-thead-fixed

搞定,美滋滋:thumbsup::thumbsup::thumbsup:

本站專欄文章皆為原創，轉載請註明出處（帶有前端亂燉字樣）和本文的顯式連結(http://www.html-js.com/article/4019)，本站和作者保留隨時要求刪除文章的權利！

css3實現固定表格頭部而無需設定單元格td的寬度

背景最近小弟在工作都是做後臺系統，一堆的表格，各種各樣的。然後需求上要有固定的表頭的表格，如下圖所示在網上查詢固定表頭的實現方式為： thead 設定為 fixed 拆分表格為兩個表格 thead一個，tbody一個然而上面

POI設定單元格的寬度和高度

作者：Tony Qu 在Excel中，單元格的寬度其實就是列的寬度，因為Excel假設這一列的單元格的寬度肯定一致。所以要設定單元格的寬度，我們就得從列的寬度下手，HSSFSheet有個方法叫SetColumnWidth，共有兩個引數：一個是列的索引（從0開始），一個是寬度。現在假設你要設定B列的寬度

通過js實現固定表格的表頭和某列

通過js實現固定表格的表頭和某列在開發過程中，如果資料比較多並且需要對比檢視的情況下，一般是是需要固定表頭和開始的某幾列。可以通過一些元件進行實現。但是引用元件需要引入大量的js檔案或者不滿足某一方面的需求。這時候就需要自己動手寫一個這樣的效果。需求表格是頁面的主體部分，表格的資料量比較大，需要

通過js手工實現固定表格的表頭和固定列

通過js實現固定表格的表頭和某列在開發過程中，如果資料比較多並且需要對比檢視的情況下，一般是是需要固定表頭和開始的某幾列。可以通過一些元件進行實現。但是引用元件需要引入大量的js檔案或者不滿足某一方面的需求。這時候就需要自己動手寫一個這樣的效果。需求表格是頁面的主體部分，表

JavaFx表格檢視TableView設定單元格可編輯（只需兩步實現）

只需兩步： 1. tableView.setEditable(true);//表格設定為可編輯 2. colUrl.setCellFactory(TextFieldTableCell.for

VUE-003-前端表格資料展示時，設定單元格（el-table-column）保留空格和換行

在使用 el-table 展示資料時，單元格中的資料有可能存在空格和換行符，若不進行設定，瀏覽器預設會取消空格和換行符，如下所示：解決方法：將單元格的樣式 “white-space” 屬性設定為“pre-wrap” 即可解決。在VUE頁面中新增如下樣式設定 1

表格單元格td設定寬度無效的解決辦法

<td width="120">123456789000000000000</td>  <td><div style="width: 60px;ov

Markdown表格—合併單元格—設定單元格顏色

Markdown表格設計我之前做表格遇到一些問題，特別是兩個小表格想要放在同一行，卻不行，所以想著要合併單元格。但是多個表格合併和想要分割線卻沒有，只好用顏色代替了。但是Markdown本身不提供單

Laravel Excel實現Excel/CSV檔案匯入匯出的功能詳解（合併單元格，設定單元格樣式）

Laravel Excel實現Excel/CSV檔案匯入匯出（合併單元格，設定單元格樣式）這篇文章主要給大家介紹了關於在Laravel中如何使用Laravel Excel實現Excel/CSV檔案匯入匯出功能的相關資料，文中通過示例程式碼介紹的非常詳細，對大

html 表格單元格的寬度和高度的設定

做網頁的時候，經常會碰到表格寬度對不齊的問題。詳細地看了html中表格標籤table的高度和寬度設定的細節，現總結如下： 1、table中的width和height設定及其作用：table中設定的height其實是設定個最小值，也就是當表格中的內容或者行高總值超過這個設定值時，會自動延長表格的

【iText5 生成PDF】純Java程式碼實現生成PDF(自定義表格、文字水印、單元格樣式)

工作中遇到需要生成PDF。最終選擇了iText。其他也有通過html再生成。感覺不太適合就用了程式碼實

使用poi導出Excel，並設定單元格內容類型，拋出異常

sdro spa ppr 相同值類型 setfill dropdown 整數 csdn 本例子使用的是HSSF,為Excel2003提供處理方案。設定為輸入類型為數值 import org.apache.poi.hssf.usermodel.DVConstraint;

/** * 表格渲染事件加載單元格的字體顏色 */

grid else color 表格 cells check mini func leg /** * 表格渲染事件加載單元格的字體顏色 */fileGridAgainMini.on("drawcell",function(e){ var record = e.reco

c# asp.net設定單元格格式

設定單元格格式如下： dg.Items[i].Cells[sfzh].Attributes.Add("style", "vnd.ms-excel.numberformat:@"); //dg是一個datatable,i表示第幾行，sfzh是需要轉換格式的列名 //把vnd.ms-ex

laravel匯出excel並設定單元格格式

$list = $this->recommend($request); $data = array(); foreach($list as $k=>$v){ $data[] = array_values($v); $len = count($v); } $header =

POI 設定單元格樣式

public static void writeExcel(List<ServAuthBean> data_list){ //新建工作簿 HSSFWorkbook workbook = new HSSFWorkbook(); //自定義顏色 HSSFPalette pa

個性化設定table的td寬度（總結）

很多時候，我們在用到table時，都希望隨意設定每個單元格的寬度，而不希望單元格被內容撐開table的樣式。 1.首先，設定table的寬度 width=“1000” 或者 width=“100%”。注意：如果width固定為1000，當每個單元格的寬度相加大於1000 時，table的寬

C#實戰016:Excel操作-設定單元格屬性

獲取單元格之後我們需要對單元格進行操作，比如過單元格寬、單元格高、單元格背景色、單元格邊框等等。 App = new Application(); //建立 Excel物件 object missing = Missing.Value; //獲取缺少

xlsxwriter【1.1.2】設定單元格格式

字典方式設定單元格格式 #通過字典的方式直接設定格式 workfomat = workbook.add_format({ 'bold' : True, #字型加粗 'border' : 1, #單

[Xcode10 實際操作]五、使用表格-(3)設置UITableView單元格圖標

span width with 視圖控制器 load() 重復 queue index 初始本文將演示如何給表格行設置圖標。打開資源文件夾【Assets.xcassets】, 在資源文件夾中導入兩張圖片：一張彩色，一張灰色，作為單元格的圖標。【+】->【I

css3實現固定表格頭部而無需設定單元格td的寬度

背景

實現方式

相關推薦