ウオの回遊日記

自由に日々を記録する

【IT】aboutページのtableの枠線を上下左右すべて表示させる

aboutページのtableの枠線が上手く表示されない

プロフィールを綺麗に表形式で表示させたかったのに、何故か表の下の枠線だけが表示されず、気持ち悪い状態が数カ月ほど続いていた。
今日もHTMLとCSSの参考書を読んでいて、ふと気になって、あまり期待せず弄り出したら解決したので、覚え書きを残しておく。

f:id:uosansan:20210718192141p:plain
下の枠線だけ表示されていない

上手く表示されなかった原因

やっていたこととして、まず、下記のページにある通り、tableタグのborder属性に「1」を指定し、枠線を表示させていた(つもりでいた)。次に、私が独自に、aboutページのhtml内でstyleタグに「border-width」プロパティで枠線の幅を指定していた。この場合だと、上と左右の枠線は表示されるが、下の枠線だけ表示されなかった。

参考URL:
www.sejuku.net

border属性を指定しなくても枠線は表示されていた

弄っていて気付いたのだが、はてなブログ側のCSSで指定してくれているのか、border属性に「1」を指定しない状態でも、tableの枠線は表示されていた。だから、もしかしてこちらでborder属性を指定しているせいで、競合してしまって上手く表示されていなかったのかもしれない、と思ったわけだ。

【失敗したソースコード

<table id="profile" border="1">
<!-- 中略 -->
#profile {
border-color:#4169e1;
border-width:0.5em;
border-radius:0.5em;
}

【成功したソースコード

<table id="profile">
<!-- 中略 -->
#profile {
border-color:#4169e1;
border-style:solid;
border-width:0.5em;
border-radius:0.5em;
}

【最終版:成功したソースコード

<table id="profile">
<!-- 中略 -->
#profile {
border:0.25em solid #649eed;
border-radius:0.5em;
}

ついでにコメントアウトしていた要らないプロパティを削除したり、style属性に指定していたプロパティをstyleタグの方に移動したり、綺麗に整頓できて、とてつもなくスッキリした。ずっと悩んでいた現象を解決できて、久しぶりに達成感。

f:id:uosansan:20210718192311p:plain
綺麗にすべての枠線が表示されました!