Applying CSS to WikiText Tables

,
#1

Could someone clarify the method of applying a set of styles to a WikiText tables.

I have some CSS that I want to use for one table:

table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

Now if I put this in a tiddler tagged $:/tags/Stylesheet it is applied to all my tables. So I need a custom class. Can I do this for the whole stylesheet and apply it to the WikiText table with a ‘k’ flag or do I need a separate style for each element?

e.g.
|myclass|k

#2

Does this answer your question?

https://tiddlywiki.com/#Tables%20in%20WikiText%20CSS%20Utility%20Classes

but, generally, yes the definitions you give in your post apply to all tables because you use the general elements used in tables (table, td, etc) so what you want to do is define special classes and apply them to your table. For example, if it concerns all td elements, you can add your class like so .mytable td {background:red}

1 Like
#3

You can use “nested” CSS rules to limit the effects to only tables that have a specific custom class, like this:

table.myclass {
  width:100%;
  border-collapse:collapse; 
  tr:nth-of-type(odd) {
    background:#eee;
  }
  th {
    background:#333;
    color:white;
    font-weight:bold;
  }
  td, th {
    padding:6px;
    border:1px solid #ccc;
    text-align: left;
  }
}

Then, you can add |myclass|k as the first row of your wikitext table to apply the desired styles.

enjoy,
-e

5 Likes
#4

Not really. I looked at that page. It hints you can create your own classes with myclass and anotherClass but the goes on to describe the predefined Utility Classes. Eric’s solution fills the gap. Thanks.

#5

You also may have a closer look to my post at: Coloring Table Cells with CSS - #2 by pmario
and: Highlight the background color of table merge cells (merge left and right, merge up and down) in tiddlers? - #2 by pmario

2 Likes