今日もCSSの競合で困った

今日も今日とて（昨日か）フロントエンドの修正をしておりました

laravel-adminのgridを使って、
データベースから取得したデータを表示しておりました

tableheaderとtabledataがありまして、
今日の議題はth(tableheader)の方でございます。

ということを実装しておりました。むりじゃろ。

overflowを使えばいいのですが、
tableが2つのレイヤーに分かれており、
下レイヤーのthを固定と横スクロールさせるのに苦戦したのは前の記事をみてくださいまし。

本日は、headerの幅をtdに合わせることに意外と苦戦してしまった話。

tdの横幅の値は、取得できた。
headerの初期位置も取得できた。
（取得するのに2時間ほどかかったが。）

さて、thに横幅を適応させたら終わりじゃおらぁ！
と思っていましたが、

position:table-cellと、
widthが競合するとのことでした。

検証ツールでは、width:（取得した値）pxと表示されているのに、
ブラウザ上では、変わっていない、、、

困っておりましたところ、その2つが競合しているということがわかりました。

なんとか対応はできましたので、共有をば。
table-cellと競合しているのならoverrideすればいいじゃない。

ということで、

lowerHeaderCells[index].style.setProperty('display', 'inline-block', 'important');

positionをoverride！！
これで上書き、ブロック要素にしてしまえばCSSが適応されました。
（今回は横一列にしたかったので、inline-blockで）

いやー、こんな単純なことだったとは、、1時間で終わる予定が5時間くらいかかりましたよ。。
なかなかどうして、急がば回れということですな。
色々お勉強になりましたわ。

もうちょっとだけ続くのじゃ。

#DB設計とER図
今日はDB設計とやらをER図作ってみましたよ。

なんのデータが必要か、、、
正規化とは、、、

この辺が今日の学び。

第１正規化とやらをやりましたよ。
参考 https://tech.012grp.co.jp/entry/db_normalization

私なりの正規化の理解は、
一つのカラムに複数の値が入る場合は、
別にテーブルを用意した方が、管理しやすいよ。
ということだと思っていますがどうでしょう。

user table
id 1
follower 2,3,4,5
follows 3,5

こうなると、データが管理しにくいぽい

user table
id 1
follows 1

follows table
id 1
follows 1:2

id 2
follows 1:3

id 3
follows 3:1

こんな感じでテーブル作って管理するのがいいらしい。
少し腑に落ちてはないが、
これから恩恵を受けることを信じて、バッチリ正規化していってみるでござる。

第２正規化、第３正規化は、また元気な時に。

データベースの設計は楽しかったのだ、設計楽しい。まとめるの好き。

最近は刺身こんにゃくにハマっている。安くて日持ちしてうまい。
ダイエットにも最適かも。シュッと絞っていきますか。
でも運動はしたくない。

おわり。