インフラエンジニアbacchiのわかったことまとめ

bacchi.me

HTML | CSS WordPress

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

更新日:

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

table_before

この時の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 がキレイに!

table_after

Sponsor Link

スポンサーリンク

Sponsor Link

スポンサーリンク

-HTML | CSS, WordPress

Copyright© bacchi.me , 2020 AllRights Reserved.