【WP】stinger3のtable 要素の表示をきれいにする

先日投稿した記事でtable を使用しましたが、
table のカラムに線が入っていなかったり、表のブロックに隙間が・・

この時のtable がらみのCSSは下記の通り。

table tr td {
    padding: 10px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-bottom-style: solid;
    border-left-style: solid;
    border-bottom-color: #999;
    border-left-color: #999;
    font-size: 14px;
    line-height: 25px;
}

表示が崩れていた原因は2つ

• th 要素が修飾されていなかった
• table 要素が修飾されていなかった

この点を踏まえ、CSSを直しました。

それが下記

table tr td, table tr th {
    padding: 10px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-bottom-style: solid;
    border-left-style: solid;
    border-bottom-color: #999;
    border-left-color: #999;
    font-size: 14px;
    line-height: 25px;
}

table {
    border-collapse:separate;
    border-spacing:0px;
}

変更点は

• table tr td のブロックに『, table tr th』を追加
• table ブロックを追加

th 要素に線が履いていなくて、表に隙間があった table がキレイに！