The problem: post-local CSS

In a recent post, I wanted to add a zebra table ([1],[2]) via the CSS3 tr:nth-child selectors, see StackOverflow. But the default Octopress markdown drove me crazy by wrapping everything in <p></p> which killed my <style> attempts. A quick glance at the markdown syntax doc suggested I could use <div> to get around this.

An example

It is useful to define the style locally since a global definition may not fit all circumstances. In the style below, we define a the table class ztab1 along with a few other style elements to dress up the table.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div>
  <style>
     table.ztab1 {
        margin: auto;
        font-size: 70%;
        border: 1px solid black;
      }

      table.ztab1 th {
        font-weight: bold;
        background-color: steelblue;
        text-align: center;
        border-bottom: 2px solid black;
      }

      table.ztab1 th,td {
        padding: 4px 5px;
      }

      table.ztab1 tr:nth-of-type(odd) {
        background-color: lightsteelblue;
      }

      table.ztab1 tr:nth-of-type(even) {
        background-color: cornflowerblue;
      }
  </style>
</div>

The result

Using the ztab1 table class defined above allows us to input raw HTML table to produce

The first column entries are centered by

1

<td style="text-align: center;">1</td>

Conclusion

using a <div> tag wrapper prevents the default Octopress markdown from eating <style> definitions. However a better solution would be to change the markdown parser, as suggested by Chico and Aral Balkan.