1. 程式人生 > >table:表格設定table-layout:fixed屬性後,如果表格中第一行出現合併單元格,那麼後面tr中的td設定寬度無效

table:表格設定table-layout:fixed屬性後,如果表格中第一行出現合併單元格,那麼後面tr中的td設定寬度無效

針對上面的問題,現在又兩種解決方法:

  1 在表格的第一行設定一個隱藏的行如下:

  1. <tablestyle="table-layout: fixed; width:100%;">
  2.     <trstyle="display:none">
  3.         <tdwidth="30%"></td>
  4.         <tdwidth="40%"></td>
  5.         <tdwidth="30%"></td>
  6.     </tr>
  7.     <tr>
  8.         <tdcolspan="3">統計表</
    td>
  9.     </tr>
  10.     <tr>
  11.         <td>111</td>
  12.         <td>222</td>
  13.         <td>333</td>
  14.     </tr>
  15. </table>

      2 在表格的tbody前插入col元素

  1. <table>
  2.     <colstyle="width:100px"/>
  3.     <colstyle="width:200px"/>
  4.     <colstyle="width:300px"/>
  5.     <tbody
    >
  6.     <tr>
  7.         <tdcolspan="3">統計表</td>
  8.     </tr>
  9.     <tr>
  10.         <td>111</td>
  11.         <td>222</td>
  12.         <td>333</td>
  13.     </tr>
  14.     </tbody>

對於表格單元格文字過長,可以通過設定td的屬性word-wrap:break-word

注意:

table中的寬度設定無效:

1.在table 標籤新增樣式 table-layout: fixed; 必須設定width的值:<table style="table-layout: fixed

"><td style="width:50px;"></td></table>

2.在如果th的寬沒有設定,那麼在td裡面新增一個節點,如果div,通過設定td裡面節點的width值來達到控制td的width的值:<td><div style="width:50px;"></div></td>


相關推薦

table表格設定table-layoutfixed屬性如果表格第一出現合併單元那麼後面trtd設定寬度無效

針對上面的問題,現在又兩種解決方法:  1 在表格的第一行設定一個隱藏的行如下:<tablestyle="table-layout: fixed; width:100%;">    <trstyle="display:none">        <

vue 表頭th 合併單元表格列數不定的動態渲染方法

吐槽 今天,在vue中遇到 複雜表格的渲染 ,需要合併表頭的單元格,且合併單元格的那列還是動態資料,也就是說你不知道會有多少組要合併起來,哎,我也有點說不清楚,廢話不多說了,看程式碼把: 程式碼示例 data資料是後端介面返回的,其中的資料格式是這樣的: [ { "studentId

vue 表頭th 合並單元表格列數不定的動態渲染方法

ios 其中 reac 項目 vue for 參數 colspan 復雜 吐槽 今天,在vue中遇到 復雜表格的渲染 ,需要合並表頭的單元格,且合並單元格的那列還是動態數據,也就是說你不知道會有多少組要合並起來,哎,我也有點說不清楚,廢話不多說了,看代碼把: 代碼示例 da

vue 表頭 th 合並單元表格列數不定的動態渲染方法

value 數據 5.5 lis 初學 代碼 課程 復雜 比較 吐槽 今天,在vue中遇到 復雜表格的渲染 ,需要合並表頭th的單元格,且合並單元格的那列的表頭數據是動態數據,也就是不知道會有多少個表頭列,而這幾個表頭列還分了好幾個子表頭。 這個需求在js裏用Juicer模

Gitbook/Markdown插入複雜(合併單元)的表格

由於Markdown語法本身不包含複雜表格的插入,因此gitbook也是不直接支援的,但是可以使用html語法來實現,一般的markdown編輯器都是支援html語法的。 複雜表格與簡單表格最大的差異有兩點:水平單元格的合併和縱向單元格的合併,通過html語法實現這兩個操作

jxl生成表格合併單元字型樣式。。。)

public static String testEx() { // a, 計算路徑 SimpleDateFormat sdf = new SimpleDateFormat("/yyyy-MM-dd/"); String datePath = sdf.form

利用Freemarker生成doc檔案(包含list迴圈ifelse判斷合併單元嵌入表格單元字數過多報錯等)

1、利用office等軟體開啟doc文件,另存為word2003xml形式的檔案。 2、修改xml中的需要動態生成的值,Freemarker變數為${data}格式的,修改完改成ftl字尾,複製到載入

關於POI設定SHEET名稱以及合併單元複製單元方法

//SHEET命名 Workbook workbook = ReadExcel.openExcleFile(srcXlsxPath); // 獲取合同到期工作簿 Sheet sheet1 = workbook.getSheetAt(0);// 獲取頁籤 wo

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

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

AsposeWords操作表格合併單元(word已經有的table合併 指定兩個單元 既可以橫向合併也可以縱向合併)-http://www.xiaoguo123.com/p/aspose_w

20180725 親測可以 xjh 強大的AsposeWords for java不僅支援建立表格,還支援合併單元格。今天就簡明扼要記錄下如何實現合併單元格。 大家可以完全套用本文提供的程式碼,只需要提供開始和結束的單元格即可實現合併,無需理解複雜的過程,真是簡潔好用啊。 此

element-uiTable表格省市區合併單元

import axios from 'axios' export default { name: "city", data() { return { tableData: [], //table的資料 originalData: [],//

課程作業01模仿JavaAppArguments.java示例編寫一個程序此程序從命令接收多個數字求和之後輸出結果。

解決問題 數據 代碼 spa clas blog 數字 循環求和 截圖 一、程序設計思想 解決問題的關鍵在於將參數進行數據類型的轉化,利用運行配置輸入的數據類型是String類型,故需要用Integer.parse()或者Integer.valueOf()將原有的Strin

課程作業01 模仿JavaAppArguments.java示例編寫一個程序此程序從命令接收多個數字求和之後輸出結果。

命令行 for ger es2017 bsp 運行 idt 定義 wid 【課程作業01】 題目要求: 模仿JavaAppArguments.java示例,編寫一個程序,此程序從命令行接收多個數字,求和之後輸出結果。 1、設計思路: 定義sum表示和,初始值設為0

bootstrap-table合併單元以及部分回掉函式

---------------------  作者:導哥  來源:CSDN  原文:https://blog.csdn.net/jingtianyiyi/article/details/76208880  版權宣告:本文為博主原創文章,轉載請附上博文連結!

table合併單元(Jquery 外掛)

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

element-UI el-table合併單元

vue+element-ui 合併單元格,如果id列值一致,則合併。 <el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">

table合併單元colspan和rowspan

olspan和rowspan這兩個屬性用於建立特殊的表格。 colspan是“column span(跨列)”的縮寫。colspan屬性用在td標籤中,用來指定單元格橫向跨越的列數: 在瀏覽器中將顯示如下: 單元格1 單元格2 單元格3 單元格4

table固定表頭及列其中行包含合併單元(支援IE但滑鼠滾動輪滾動效果不太友好)

PS:該程式碼用於學習,大部分不是原創,在他(她)人程式碼的基礎上修改成自己想實現的效果,來源不明,因此沒有加轉載連結,如有問題,先在這裡抱歉,請聯絡我刪除。 內容實現的效果與上一篇一樣,但是這個這個用了一點點js去實現IE沒有辦法相容的一些屬性,所以這個版本可以相容IE的高版本和低版本,測試用的版本時IE8

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

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

Html Table 合併單元

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti