how to set table border width = 0 ?

[s.mi...@mailbox.kun.nl]

I've playing around with TW for a few days now, and I really like the
concept, I even would I could embed this in all my applications, I've
been looking for such a concept for years !!

I made a table, which shows in a somewhat hierarchical way a set of
libraries for microcontrolers (PICs), based on the idea of the periodic
table. This should become a general download site for all available
libs. Now it would be very nice to let the cell and table borders
disappear.

I've also tried to embed the table as an html-part, but that really
gives garbage (even worse in Mozilla than in IE ;-)

You can see what I mean here (at the moment only the INC-file Tiddler)
http://oase.uci.kun.nl/~mientki/tiddly_test1.html

thanks,
Stef Mientki

[Elise Springer]

Stef,

If you don't have a tiddler named StyleSheet, then create one, and put in it:

.viewer table { border: none; }

.viewer td, tr { border: none; }

To tinker with things under the hood in general, notice that many settings are located in "shadow tiddlers". Each shadowed tiddler won't appear in your lists until and unless you modify it.

So, you might create somewhere a place to view these shadowed items. (I have a tiddler called "AdminStuff" for things like this.)  Just type in:

<<list shadowed>>

and when you hit "done", you should see there a list of the places where magical css and template settings are all stored.

Cheers,

-E

[Stef Mientki]

hi Elise,

Elise Springer wrote:

Stef,

If you don't have a tiddler named StyleSheet, then create one, and put in it:

.viewer table { border: none; }

.viewer td, tr { border: none; }

To tinker with things under the hood in general, notice that many settings are located in "shadow tiddlers". Each shadowed tiddler won't appear in your lists until and unless you modify it.

thanks, that seems to work just enough:
- the first time in Firefox 95% of the lines disappeared
- all the next times in Firefox, just the vertical lines disappeared
- in IE (or Firefox IE-tab), always the 95% lines disappear (some lines at the top still are there,
but that's of no imporantance.
Maybe this is due to the Firefox 1.5.0.1 version mentioned elsewhere.

So, you might create somewhere a place to view these shadowed items. (I have a tiddler called "AdminStuff" for things like this.)  Just type in:

<<list shadowed>>

and when you hit "done", you should see there a list of the places where magical css and template settings are all stored.

This is really great and looks very handy.

Brings me to a few other questions
1. I didn't have a StyleSheet, but I do have a StyleSheetLayout,
would that also be a good place to put this script in,
or is it reserved for system use ?
2. How do I make a new Tiddler "shadowed" (or shouldn't that be done)  ??
3. Is there some comprehensive doc, where all these nice features are listed ??

cheers,
Stef

[Eric Shulman]

> thanks, that seems to work just enough:
- the first time in Firefox 95% of the lines disappeared
> - all the next times in Firefox, just the vertical lines disappeared
> - in IE (or Firefox IE-tab), always the 95% lines disappear (some lines
> at the top still are there,
> but that's of no imporantance.
> Maybe this is due to the Firefox 1.5.0.1 version mentioned elsewhere.

I think that this:

.viewer td, tr { border: none; }

should be:
.viewer td, .viewer tr, .viewer tbody, .viewer th { border: none; }

HTH,

-e
Eric Shulman
TiddlyTools / ELS Design Studios

[Stef Mientki]

thanks Eric,
that indeed works better.
cheers,
Stef

[Udo Borkowski]

The only drawback with the solution is that this change affects all tables in the TW, since the "viewer" class is used.

My idea is to extend the "Table" syntax to support an additional "class" parameter. This way you can specify an individual CSS class for every table.

E.g.:

|A|B|C|
|1|2|3|
|x|y|z|
|noBorder|k

defines a table that uses the klass "noBorder". As you can see the syntax is similar to the way a "caption" is specified for a table, just specify a "k" at the end of the row.


If you define the following noBorder rules in your StyleSheet you get what you are looking for:

    .noBorder td, .noBorder tr, .noBorder tbody, .noBorder th { border: none; }

All other tables keep their default formatting.



To make this work the implementation of the table formatter in the TW core code needs to be extended.

(changes marked red)

config.formatters = [
{
    name: "table",
    match: "^\\|(?:[^\\n]*)\\|(?:[fhck]?)$",
    lookahead: "^\\|([^\\n]*)\\|([fhck]?)$",
    rowTerminator: "\\|(?:[fhck]?)$\\n?",
    cellPattern: "(?:\\|([^\\n\\|]*)\\|)|(\\|[fhck]?$\\n?)",
    cellTerminator: "(?:\\x20*)\\|",
    rowTypes: {"c": "caption", "h": "thead", "": "tbody", "f": "tfoot"},
    handler: function(w)
    {
        var table = createTiddlyElement(w.output,"table");
        w.nextMatch = w.matchStart;
        var lookaheadRegExp = new RegExp(this.lookahead,"mg");
        var currRowType = null, nextRowType;
        var rowContainer, rowElement;
        var prevColumns = [];
        var rowCount = 0;
        do {
            lookaheadRegExp.lastIndex = w.nextMatch;
            var lookaheadMatch = lookaheadRegExp.exec(w.source);
            var matched = lookaheadMatch && lookaheadMatch.index == w.nextMatch;
            if(matched)
                {
                nextRowType = lookaheadMatch[2];
                if (nextRowType == "k")
                    {
                        table.className = lookaheadMatch[1];
                        w.nextMatch += lookaheadMatch[0].length+1;
                        continue;
                    }
                if(nextRowType != currRowType)
                    rowContainer = createTiddlyElement(table,this.rowTypes[nextRowType]);


Maybe someone ( ;-) ) will add this extension to the next release of TiddlyWiki.



Udo

[Daniel Baird]

Udo said what i was going to say ('cept I wouldn't have code to include).

Some tables are actual tabular data, but sometimes they're sort of layout like the original poster's table.  So it should be possible to distinguish particular tables as Udo suggests.

So,in summary, Me too!

;Daniel

--
Daniel Baird
http://danielbaird.com (TiddlyW;nks! :: Whiteboard Koala :: Blog :: Things That Suck)
[[My webhost uptime is ~ 92%.. if no answer pls call again later!]]

[Eric Shulman]

> |A|B|C|
> |1|2|3|
> |x|y|z|
> |noBorder|k

[... and then add a wikifier plugin to handle the 'k' table syntax to
set the class...]

or, with InlineJavascriptPlugin, you can use this 'one-liner':

|A|B|C|
|1|2|3|
|x|y|z|

<script>place.lastChild.className="noBorder"</script>

Then, as Udo has already described, use CSS in a StyleSheet tiddler to
define the .noBorder class.

[Eric Shulman]

errata: I found that "border:none" doesn't work, but "border:0px solid
#000 !important" does...

-----TiddlerContent--------

|A|B|C|
|1|2|3|

<script>place.lastChild.className="borderless"</script>

----- StyleSheet ---------
.borderless, .borderless td, .borderless tr, .borderless th,
.borderless tbody
{ border:0px solid #000 !important; }

[Jeremy Ruston]

> Maybe someone ( ;-) ) will add this extension to the next release of
> TiddlyWiki.

Thanks Udo, great improvement. In 2.0.5

Cheers

Jeremy

--
Jeremy Ruston
mailto:jer...@osmosoft.com
http://www.tiddlywiki.com