From 000368636cba3547e3b280e1960e72198b41cb01 Mon Sep 17 00:00:00 2001
From: Hufe921 <huangyunfeihufe@hotmail.com>
Date: Wed, 13 Mar 2024 21:11:41 +0800
Subject: [PATCH] fix: adjust the style of converting table element to html
 #458

---
 src/editor/utils/element.ts | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts
index e380c14..17600b0 100644
--- a/src/editor/utils/element.ts
+++ b/src/editor/utils/element.ts
@@ -780,16 +780,33 @@ export function createDomFromElementList(
       // 构造表格
       if (element.type === ElementType.TABLE) {
         const tableDom: HTMLTableElement = document.createElement('table')
+        tableDom.setAttribute('cellSpacing', '0')
+        tableDom.setAttribute('cellpadding', '0')
+        tableDom.setAttribute('border', '0')
+        tableDom.style.borderTop = tableDom.style.borderLeft = '1px solid'
+        tableDom.style.width = `${element.width}px`
+        // colgroup
+        const colgroupDom = document.createElement('colgroup')
+        for (let c = 0; c < element.colgroup!.length; c++) {
+          const colgroup = element.colgroup![c]
+          const colDom = document.createElement('col')
+          colDom.setAttribute('width', `${colgroup.width}`)
+          colgroupDom.append(colDom)
+        }
+        tableDom.append(colgroupDom)
+        // tr
         const trList = element.trList!
         for (let t = 0; t < trList.length; t++) {
           const trDom = document.createElement('tr')
           const tr = trList[t]
+          trDom.style.height = `${tr.height}px`
           for (let d = 0; d < tr.tdList.length; d++) {
             const tdDom = document.createElement('td')
-            tdDom.style.border = '1px solid'
+            tdDom.style.borderBottom = tdDom.style.borderRight = '1px solid'
             const td = tr.tdList[d]
             tdDom.colSpan = td.colspan
             tdDom.rowSpan = td.rowspan
+            tdDom.style.verticalAlign = td.verticalAlign || 'top'
             const childDom = buildDom(zipElementList(td.value!))
             tdDom.innerHTML = childDom.innerHTML
             if (td.backgroundColor) {