TablePressで作成した表のスタイルを設定する（列幅・中央揃え）

WordPressでテーブル（表）を簡単に作成できるプラグインTablePressで作成したテーブルの例は次のようになります。

これでも問題はありませんが、細かい希望を言えば、個別の列の幅を設定したり文字の中央寄せなども設定できればと思うかもしれません。

通常の表であれば個別の列を設定するには

#tablepress-1 td:nth-child(2) {
    width:60px;
}

のようなCSSを記述する必要がありますが、TablePressで作成した表には次のように細かくclass名が付いているので便利です。

<table id="tablepress-1" class="tablepress tablepress-id-1">
<thead>
<tr class="row-1 odd">
    <th class="column-1"><div>講座名</div></th>
    <th class="column-2"><div>基本料金</div></th>
    <th class="column-3"><div>1時間延長した場合</div></th>
    <th class="column-4"><div>2時間延長した場合</div></th>
</tr>
</thead>
<tbody class="row-hover">
<tr class="row-2 even">
    <td class="column-1">ホームページ作成講座</td>
    <td class="column-2">90分8,000円</td>
    <td class="column-3">14,000円（2時間30分）</td>
    <td class="column-4">20,000円（3時間30分）</td>
</tr>
<tr class="row-3 odd">
    <td class="column-1">WordPress個別サポート</td>
    <td class="column-2">60分6,000円</td>
    <td class="column-3">12,000円（2時間）</td>
    <td class="column-4">18,000円（3時間）</td>
</tr>
</tbody>
</table>

各テーブルにはテーブルID（TablePressメニューと連動）が付いています。列については「column-999」、行については「row-999」のようなclass名が付いています。また、偶数行、奇数行には「even」「odd」というclass名が付いているので1行ごとに独自の色を設定することもできます。

このような直感的なclass名を使って、たとえば「1列目の幅を100pxに」「2列目の幅を40pxに」は次のように記述することができます。

#tablepress-1 .column-1 {
    width:100px;
}

#tablepress-1 .column-2 {
    width:40px;
}

「.column-1」が1列目、「.column-2」が2列目を示しています。表示結果は次のようになります。

同じように1行目が「.row-1」、2行目が「.row-2」なので、特定のセルを指定するイメージでスタイルを変更することができます。

#tablepress-1 .row-2 .column-2 {
    background-color:#f6bfbc;
}

表示結果は次のようになります。

ついでですが、中央揃えにするには「text-align:center;」を使います。

#tablepress-1 .column-1 {
    width:160px;
    text-align:center;
}

表示結果は次のようになります。