Guidelines in Design Time for Zero Border Table

Diego is the founding developer of a Spanish reporting-tool ISV. His product lets financial analysts author rich management reports inside a WPF desktop app, then publishes them as PDF and HTML for the executive team. One of the layout tricks his analysts use constantly: invisible one-row, two-column tables to align a sub-heading with a small icon or a metric value beside it. The tables ship with border="0" so the final report looks like clean typography, no visible grid lines anywhere.

The problem during authoring was obvious in hindsight. A table with no border is, by definition, invisible. Diego's analysts could not see where one cell ended and the next began. They would click in what they thought was the left cell and end up typing in the right cell. They would try to merge cells and select the wrong region. Productivity on report templates ground to a halt.

The WpfHtmlEditor already handles this case. It injects a small CSS rule into the editing surface that paints a faint guideline around every cell of a zero-border table while the user is editing. The rule is scoped to the design surface; it never leaks into the saved HTML. The property is Options.ZeroBorderTableGuidelineCss.

Out of the box, the default value is a thin dashed gray outline. That was almost right for Diego but a bit too subtle against the cream-colored report background his template used. He swapped in a blue dotted outline with a faint background tint and his analysts saw the table cells immediately.

editor.Options.ZeroBorderTableGuidelineCss =

    "border: 1px dotted #0078d4; background: #f3f9ff;";

Zero-border table showing dashed design-time guidelines around each cell

The first time he ran a test export after changing the CSS, he checked the saved HTML to make sure his colored guideline had not leaked into the final report. It had not. The editor strips the guideline rule before handing the HTML back through BodyHtml or DocumentHtml. The PDF and the published Web view both rendered the report with the clean, borderless layout his analysts intended.

Published report output with guidelines stripped from the saved HTML

One of his analysts, working on a marketing-facing report template, eventually asked Diego to hide the guidelines entirely. The template was deliberately built to look the same in the editor as it did in print -- a precise WYSIWYG preview for client review. Diego added a per-template toggle that set the option to an empty string for that template:

editor.Options.ZeroBorderTableGuidelineCss = string.Empty;

Two notes Diego shares with new hires on his team. First, the same option lives on the WinForms control through the shared IEditorOptions interface, so the same configuration code works on both products. Second, the guideline is purely a design-time aid -- it is not a workaround for accessibility or a substitute for setting a real border when the report actually needs one. For tables that should have a visible border in the output, set border="1" on the table itself; the guideline rule only kicks in when the border is zero.