テーブルに罫線を表示 (JavaScript 不使用)

概要:SphinxにてreSTをHTML変換時、テーブルタグ<table />に罫線を表示する方法

サンプル

通常(テーマがdefaultの場合のイメージ)

table-td-border
a b
c d
e f
a b
c d
e f
a b
c d
e f
a b
c d
e f

table-td-border 指定有り(<th />, <td />(直下の子要素のみ)の罫線)

table-td-border
a b
c d
e f
a b
c d
e f
a b
c d
e f
a b
c d
e f

table-td-borders 指定有り(<th />, <td />(子孫要素を含む)の罫線)

table-td-borders
a b
c d
e f
a b
c d
e f
a b
c d
e f
a b
c d
e f

reStructuredText (reST)

概要:
下記、reSTは td-border クラスを指定しているが、
td-borders クラスを設定することで、サンプルのように設定する事が可能
.. table::
   :class: td-border

   +-+-+
   |a|b|
   +=+=+
   |c|d|
   +-+-+
   |e|f|
   +-+-+

Cascading Style Sheets (CSS)

概要:
.table-td-borderクラス直下の<th />タグと<td />タグに黒色の罫線
.table-td-bordersクラス配下(入れ子のテーブルを含む)の<th />タグと<td />タグに黒色の罫線
/* td-border (<th />, <td />(直下の子要素のみ)の罫線) */
table.td-border > tr > th,
table.td-border > tr > td,
table.td-border > thead > tr > th,
table.td-border > thead > tr > td,
table.td-border > tbody > tr > th,
table.td-border > tbody > tr > td,
table.td-border > tfoot > tr > th,
table.td-border > tfoot > tr > td { border: 1px solid black !important; }
/* td-borders (<th />, <td />(子孫要素を含む)の罫線) */
table.td-borders th,
table.td-borders td { border: 1px solid black !important; }