aboutページのtableの枠線が上手く表示されない
プロフィールを綺麗に表形式で表示させたかったのに、何故か表の下の枠線だけが表示されず、気持ち悪い状態が数カ月ほど続いていた。
今日もHTMLとCSSの参考書を読んでいて、ふと気になって、あまり期待せず弄り出したら解決したので、覚え書きを残しておく。
上手く表示されなかった原因
やっていたこととして、まず、下記のページにある通り、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タグの方に移動したり、綺麗に整頓できて、とてつもなくスッキリした。ずっと悩んでいた現象を解決できて、久しぶりに達成感。