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?

[codacoder...@outlook.com]

On Tuesday, September 5, 2017 at 1:27:03 PM UTC-5, Vayu Asura wrote:

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 

 

Remove the dot from the class:

<table class="no-border">

[Ton Gerner]

Hi Vayu

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

Cheers,

Ton

[Mark S.]

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

[Vayu Asura]

that yields quite strange results actually...

[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.

[codacoder...@outlook.com]

On Tuesday, September 5, 2017 at 2:16:13 PM UTC-5, Vayu Asura wrote:

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.

[codacoder...@outlook.com]

On Wednesday, September 6, 2017 at 10:11:52 AM UTC-5, Vayu Asura wrote:

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.