ソースコードを表示させるプラグインと特定のtableへの指定css

ソースコードを表示させるプラグインはCrayon Syntax Highlighterを使用しました。

スッキリ綺麗に表示できます。

特定のtableだけ仕様を変えたかったので
子テーマの編集でcssに以下のように書き加えます。

table.type01 {
width: 100%;
}

table.type01 tr th,
table.type01.type01 tr td {
border: 1px solid #DDD;
font-size:1.2rem;
}

table.type01 tr th {
font-weight: bold;
font-size:1.2rem;
}

table.type01 tr:nth-child(even) td {
background: #f2f2f2;
font-size:1.2rem1;
}

この指定は偶数の層に色がつきます。

そして、記事内のtableは以下のように

<table class="type01">
<tr>
<td>No.</td>
<td>簡単な説明</td>
<td>元価格</td>
<td>値下価格</td>
<td>冒頭台詞</td>
</tr>
<tr>
<td>01</td>
<td>説明です</td>
<td>2000円</td>
<td>100円</td>
<td>台詞が入ります</td>
</tr>
<tr>
<td>02</td>
<td>説明です</td>
<td>5000円</td>
<td>2000円</td>
<td>台詞が入ります</td>
</tr>
</table>

これが実際の表示です。