[tw] Make a borderless table

[Vayu Asura]

I want a specific table to be bordeless

The syntax for wiki tables allows that style string in the top.

However I couldn't either find a proper style in the default stylesheet to
get the invisible border or make my own:

tagged `$:/tags/Stylesheet`

.no-border {
border: 0px;
}

and the table I want to make borderless in another tiddler:

|.no-border|k
|myfield|myvalue|

Dev-tools show

<table class=".no-border">
<tbody>
<tr class="evenRow"><td>myfield</td><td>myvalue</td></tr>
</tbody>
</table>

But the border still renders. What am I doing wrong?

[c***@outlook.com]

Post by Vayu Asura
I want a specific table to be bordeless
The syntax for wiki tables allows that style string in the top.
However I couldn't either find a proper style in the default stylesheet to
tagged `$:/tags/Stylesheet`
.no-border {
border: 0px;
}
|.no-border|k
|myfield|myvalue|
Dev-tools show
<table class="no-border">

[Vayu Asura]

that yields quite strange results actually...

Post by Vayu Asura
I want a specific table to be bordeless
The syntax for wiki tables allows that style string in the top.
However I couldn't either find a proper style in the default stylesheet
tagged `$:/tags/Stylesheet`
.no-border {
border: 0px;
}
|.no-border|k
|myfield|myvalue|
Dev-tools show
<table class="no-border">

[Ton Gerner]

Hi Vayu

See
https://groups.google.com/forum/#!msg/tiddlywiki/UC10tciyr1U/8mQuSt4VBsUJ

Cheers,

Ton

['Mark S.' via TiddlyWiki]

In the table it should be:

|no-border|k
|myfield|myvalue|

Then, I found I needed this for the class. YMMV:

.no-border th, .no-border td, .no-border tr, table.no-border {
border: none ;
}

Mark

Post by Vayu Asura
I want a specific table to be bordeless
The syntax for wiki tables allows that style string in the top.
However I couldn't either find a proper style in the default stylesheet to
tagged `$:/tags/Stylesheet`
.no-border {
border: 0px;
}
|.no-border|k
|myfield|myvalue|
Dev-tools show
<table class=".no-border">
<tbody>
<tr class="evenRow"><td>myfield</td><td>myvalue</td></tr>
</tbody>
</table>
But the border still renders. What am I doing wrong?

[Vayu Asura]

Found Eric's solution
here https://groups.google.com/forum/#!topic/tiddlywiki/UC10tciyr1U

I have no idea how it works save for the most abstract concepts. The funny
thing about its implication is:

when invoked with <table class="borderless"></table> it keeps the outermost
border of the table
and when invoked like

@@.borderless
<table>
</table>
@@


removes the outer border as well.

Weird.

Post by Vayu Asura
I want a specific table to be bordeless
The syntax for wiki tables allows that style string in the top.
However I couldn't either find a proper style in the default stylesheet to
tagged `$:/tags/Stylesheet`
.no-border {
border: 0px;
}
|.no-border|k
|myfield|myvalue|
Dev-tools show
<table class=".no-border">
<tbody>
<tr class="evenRow"><td>myfield</td><td>myvalue</td></tr>
</tbody>
</table>
But the border still renders. What am I doing wrong?

[c***@outlook.com]

Post by Vayu Asura
when invoked with <table class="borderless"></table> it keeps the
outermost border of the table

I see no border using Eric's code. I checked the css and looked in
DevTools inspector. Apart from TW's row styling being applied to the
wikitext version, they're identical with respect to borders.

[Vayu Asura]

maybe it has to do with some surrounding tags.

On Tuesday, September 5, 2017 at 10:44:15 PM UTC+3,

Post by c***@outlook.com

Post by Vayu Asura
when invoked with <table class="borderless"></table> it keeps the
outermost border of the table

I see no border using Eric's code. I checked the css and looked in
DevTools inspector. Apart from TW's row styling being applied to the
wikitext version, they're identical with respect to borders.

[c***@outlook.com]

Post by Vayu Asura
maybe it has to do with some surrounding tags.

Something might be messing with it, but since the css border property is
not inherited, it's unlikely.

Is it possible you have another css setting somewhere? The "cascade" might
be throwing you off.

Take a look in DevTools Inspector -- what does that show?

Open your Tiddler that has the table element in VIEW mode (not edit mode),
right-click on the table element, choose the "Inspect" option. You could
then send a screen capture here for us to take a look.

[Ste Wilson]

I asked this some time ago and got this answer which works...

stephenteacher.tiddlyspot.com/#%24%3A%2FNo%20Borders

Tag tiddler with $:/tags/Stylesheet

Code as follows:
.no-border,
.no-border th,
.no-border tr,
.no-border td{
border:0;}
.no-border .tg-0ord{text-align:right}
.no-border .tg-s6z2{text-align:center}
.no-border .tg-h0x1{text-align:left}
.no-border td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;}
.no-border th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;}

And set type to text/css

@@.no-border
|!border|less|
@@

Then works wonders. Apologies if I've duplicated.