Copyright © 2009-2025 下載吧 (www.www44003.cn) All Rights Reserved.
聲明： 本站所有軟件和文章來自互聯(lián)網(wǎng) 如有異議 請與本站聯(lián)系處理 本站為非贏利性網(wǎng)站 不接受任何贊助和廣告
時間：2024-02-03 17:42作者：下載吧人氣：33
繼上一篇postgresql高級應用之行轉列&匯總求和之后想更進一步做點兒復雜的(圖表暫且不論哈😂)，當然作為報表，出現(xiàn)最多的無非就是合并單元格了，是的，我已經(jīng)迫不及待啦😎~
首先，我們的腦海中應該有一個對前端table有一個大致的了解， 當然這對非前端的同學十分的不友好，如果您嘗試閲讀以下內(nèi)容存在困難的話(前端html、javascript) 可就此打住哈。。。
enn…,讓我先稍稍解釋下前端 html 的表格格式吧😀
html->table基本結構先給出一個十分base的html demo.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>demo</title> </head> <body> <!-- 這裏定義了兩個屬性 border:定義表格邊框 cellpadding:定義單元格大小 --> <table border="3" cellpadding="8"> <thead> <tr> <th>表頭1</th><th>表頭2</th><th>表頭3</th> </tr> </thead> <tbody> <tr> <td>第一行第1個</td><td>第一行第2個</td><td>第一行第3個</td> </tr> <tr> <!-- 使用colspan屬性進行橫向合并，橫向被合并的單元格位置需要騰出來 --> <!-- 以下橫向合并兩個單元格，所以第二個td標簽就不要寫了，否則會溢出哦~ --> <td colspan="2">橫向合并了兩個單元格</td><td>第二行第3個</td> </tr> <tr> <td>第三行第1個</td><td>第三行第2個</td><td>第三行第3個</td> </tr> <tr> <!-- 使用rowspan屬性進行縱向合并，縱向合并的(跨越的)單元格位置需要騰出來 --> <!-- 以下縱向合并三個個單元格(在本行最後一個標簽)，所以下兩行的最後兩個td標簽就不要寫啦~，否則同樣會溢出哦~ --> <td>第四行第1個</td><td>第四行第2個</td><td rowspan="3">縱向合并了三個單元格</td> </tr> <tr> <td>第五行第1個</td><td>第五行第2個</td> </tr> <tr> <td>第六行第1個</td><td>第六行第2個</td> </tr> </tbody> </table> </body> </html>
Copyright © 2009-2025 下載吧 (www.www44003.cn) All Rights Reserved.
聲明： 本站所有軟件和文章來自互聯(lián)網(wǎng) 如有異議 請與本站聯(lián)系處理 本站為非贏利性網(wǎng)站 不接受任何贊助和廣告
網(wǎng)友評論