[TW5] how to make one "invisible" table

[Florian Cauvin]

Hi,
I want to create a table where only the elements are visible and with no decoration/border.
Anyone can help with this?

I tried something like the following, but it didn't really work out:

@@border:none;
|a|b|
|c|d|
@@

/Florian

[Eric Shulman]

In addition to the table element itself, there are several nested HTML elements that are contained within the table: th, td, tr, and tbody.  Each of these has it's own default border style.  Here's a bit of CSS that defines a classname, "borderless", that can applied to each part of the table:

.borderless,
.borderless table,
.borderless td,
.borderless tr,
.borderless th,
.borderless tbody
    { border:0 !important; }

Place the above in a tiddler tagged with "$:/tags/Stylesheet".  This will make the new CSS classname available for use.

Then, to apply this classname to your table content, you can simply write:

@@.borderless

|a|b|
|c|d|
@@

The resulting table will have the same layout (e.g. margins and padding) as before, but without any visible borders. Q.E.D.

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

"Inside TiddlyWiki: The Missing Manual"

https://www.indiegogo.com/projects/inside-tiddlywiki-the-missing-manual/x/8816263

Note: the IndieGogo funding campaign has ended,

but direct fundraising continues below...

YOUR DONATIONS ARE VERY IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact

[Jon]

Thanks, Eric - I'd also wondered how to do that.
Regards
Jon

[Brian Diamante]

Hadn't seen this documented elsewhere. Extremely helpful still in 2019. Thanks!

Brian

[Mohammad]

Added to TW-Scripts

[mauloop]

An alternative syntax is:

```
|a|b|
|c|d|
|borderless|k
```