Design-time guidelines for zero-border tables
Carlos builds the invoice-template designer at a billing-software company. His users -- accounting clerks and template designers at customer firms -- spend their afternoons constructing pixel-perfect invoice layouts: company logo top-left, billing address top-right, line items in a grid, totals bottom-right. They build these layouts in WinFormHtmlEditor using HTML tables with border="0", because the final printed invoice should not show grid lines anywhere.
The trouble started right after Carlos shipped the first beta. Designers complained the editor was "broken". They clicked into the design surface and couldn't tell where one cell ended and the next began. They couldn't place the caret reliably, couldn't select a column, couldn't see that their three-column header was actually a five-column table with two empty spacer cells.
The HTML was correct. The final invoice rendered exactly as intended. But at design time, an invisible border is also invisible to the designer, and the editor became unusable for layout work.
[IMAGE: zero-border-design-problem.png -- editor showing a zero-border table with no visible cell boundaries, designer struggling to place the caret]
Options.ZeroBorderTableGuidelineCss
Carlos discovered the option that solves this exact problem: Options.ZeroBorderTableGuidelineCss. The property holds a CSS rule body that the editor injects at design time only, scoped to cells inside zero-border tables. The CSS makes the cells visible to the author; it never appears in DocumentHtml or BodyHtml, so it never escapes into the saved invoice.
// Set once during designer initialization.htmlEditor1.Options.ZeroBorderTableGuidelineCss = "border: 1px dashed #c0c0c0;";One line. The next time a designer opened an invoice template, every cell in every zero-border table had a faint dashed gray outline. They could finally see what they were editing.
[IMAGE: zero-border-design-vs-runtime.png -- left: editor with dashed gray guidelines visible; right: same invoice rendered in a PDF preview with no borders]
Customizing the guideline look
The CSS value is whatever you want it to be -- any rule body that's valid on a <td>. Carlos experimented with a few looks before settling on the company's brand-aligned style:
// Default-ish: dashed gray."border: 1px dashed #c0c0c0;"// Wireframe look: dotted blue, no fill."border: 1px dotted #6699cc;"// What Carlos shipped: hairline gray plus a soft background tint so// designers can spot empty spacer cells at a glance."border: 1px solid #e8e8e8; background-color: #fafafa;"[IMAGE: zero-border-guideline-variants.png -- three side-by-side editor screenshots showing the same invoice with different guideline styles]
Why the saved HTML stays clean
This was the part Carlos verified before shipping: the guideline CSS lives in a design-time-only style block that the editor manages as part of its own chrome. It's not part of the document tree. When Carlos reads DocumentHtml to save the invoice, the output contains the user's table with border="0" and nothing else -- no inline borders, no leftover style rules from the design surface. The PDF renderer downstream gets exactly the borderless table the designer drew.
Turning it off for preview mode
Carlos's app has a separate preview pane that uses the editor in read-only mode. In that pane, the designer wants to see the invoice exactly as the customer will receive it -- with no design-time decorations. He clears the property for that instance:
previewEditor.Options.ZeroBorderTableGuidelineCss = string.Empty;Empty string turns the guidelines off entirely. The preview pane renders the invoice with no visible borders, matching the final output.
[IMAGE: zero-border-preview-no-guideline.png -- preview pane showing the invoice with guidelines disabled, matching the final PDF]
After the change, Carlos's support queue dropped the "I can't see the cells" tickets entirely. Designers built layouts faster, the final invoices were unchanged, and his PM moved the team on to the next feature.