fix: improve collapsing of vertical table borders

Revert earlier change which disabled rendering of top/left borders,
because this would cause the height of a thick left border to be too
short for a cell with added top/bottom borders (e.g. see "Thick border
all around" in SD-1131-table-borders.docx). Instead, render all four
borders, but allow them to overlap, to simulate collapsed borders.

Author: afn

packages/layout-engine/painters/dom/src/table/renderTableCell.ts

@@ -307,23 +307,24 @@ export const renderTableCell = (deps: TableCellRenderDependencies): TableCellRen
   const paddingTop =
     (cell?.attrs?.padding?.top ?? defaultTableCell.attrs.padding.top) + rowBorderTop - getBorderWidth(borders?.top);
   const paddingBottom = cell?.attrs?.padding?.bottom ?? defaultTableCell.attrs.padding.bottom;
-  const paddingLeft = cell?.attrs?.padding?.left ?? defaultTableCell.attrs.padding.left;
+  const paddingLeft =
+    (cell?.attrs?.padding?.left ?? defaultTableCell.attrs.padding.left) - getBorderWidth(borders?.left) / 2;
   const paddingRight = cell?.attrs?.padding?.right ?? defaultTableCell.attrs.padding.right;
 
   const cellEl = doc.createElement('div');
   cellEl.style.position = 'absolute';
-  cellEl.style.left = `${x}px`;
+  cellEl.style.left = `${x - getBorderWidth(borders?.left) / 2}px`;
   cellEl.style.top = `${y}px`;
-  cellEl.style.width = `${cellMeasure.width}px`;
+  cellEl.style.width = `${cellMeasure.width + getBorderWidth(borders?.left) / 2 + getBorderWidth(borders?.right) / 2}px`;
   cellEl.style.height = `${rowHeight + getBorderWidth(borders?.bottom)}px`;
   cellEl.style.boxSizing = 'border-box';
   // Cell clips all overflow - no scrollbars, content just gets clipped at boundaries
   cellEl.style.overflow = 'hidden';
   // Apply padding directly to cell so content is positioned correctly
-  cellEl.style.paddingLeft = `${paddingLeft}px`;
-  cellEl.style.paddingTop = `${paddingTop}px`;
-  cellEl.style.paddingRight = `${paddingRight}px`;
-  cellEl.style.paddingBottom = `${paddingBottom}px`;
+  cellEl.style.paddingLeft = `${Math.max(0, paddingLeft)}px`;
+  cellEl.style.paddingTop = `${Math.max(0, paddingTop)}px`;
+  cellEl.style.paddingRight = `${Math.max(0, paddingRight)}px`;
+  cellEl.style.paddingBottom = `${Math.max(paddingBottom, 0)}px`;
 
   if (borders) {
     applyCellBorders(cellEl, borders);

packages/layout-engine/painters/dom/src/table/renderTableRow.ts

@@ -1,4 +1,5 @@
 import type {
+  CellBorders,
   DrawingBlock,
   Line,
   ParagraphBlock,
@@ -239,7 +240,7 @@ export const renderTableRow = (deps: TableRowRenderDependencies): void => {
     // - If continuesFromPrev=true: draw TOP border (table's top border) to close the top
     // - If continuesOnNext=true: draw BOTTOM border (table's bottom border) to close the bottom
     // This means both fragments at a split have their edge borders drawn.
-    let resolvedBorders;
+    let resolvedBorders: CellBorders | undefined;
     if (hasBordersAttribute && !hasExplicitBorders) {
       // Cell explicitly has borders={} meaning "no borders"
       // TODO: Is this actually accurate? Shouldn't borders={} mean "don't override any borders"?
@@ -258,15 +259,13 @@ export const renderTableRow = (deps: TableRowRenderDependencies): void => {
 
       resolvedBorders = {
         // For top: use cell's if defined, otherwise use table's top border for first row OR continuation
-        top: treatAsFirstRow ? (cellBordersAttr?.top ?? borderValueToSpec(tableBorders?.top)) : undefined,
+        top: borderValueToSpec(cellBordersAttr?.top ?? (treatAsFirstRow ? tableBorders?.top : undefined)),
         // For bottom: use cell's if defined, otherwise use table's bottom border for last row OR before continuation
-        bottom: cellBordersAttr?.bottom ?? borderValueToSpec(treatAsLastRow ? tableBorders?.bottom : undefined),
+        bottom: borderValueToSpec(cellBordersAttr?.bottom ?? (treatAsLastRow ? tableBorders?.bottom : undefined)),
         // For left: use cell's if defined, otherwise use table's left for first col
-        left: isFirstCol
-          ? (cellBordersAttr?.left ?? borderValueToSpec(isFirstCol ? tableBorders?.left : tableBorders?.insideV))
-          : undefined,
+        left: borderValueToSpec(cellBordersAttr?.left ?? (isFirstCol ? tableBorders?.left : undefined)),
         // For right: use cell's if defined, otherwise use table's right for last col only
-        right: cellBordersAttr?.right ?? borderValueToSpec(isLastCol ? tableBorders?.right : undefined),
+        right: borderValueToSpec(cellBordersAttr?.right ?? (isLastCol ? tableBorders?.right : undefined)),
       };
     }