今日もCSSの競合で困った
今日も今日とて（昨日か）フロントエンドの修正をしておりました
laravel-adminのgridを使って、
データベースから取得したデータを表示しておりました
tableheaderとtabledataがありまして、
今日の議題はth(tableheader)の方でございます。
ヘッダーを横移動させつつ、縦スクロール時には固定して、tdの幅にthを合わせて、スクロール時にズレない様にしたい！
ということを実装しておりました。むりじゃろ。
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
こんな感じでテーブル作って管理するのがいいらしい。
少し腑に落ちてはないが、
これから恩恵を受けることを信じて、バッチリ正規化していってみるでござる。
第２正規化、第３正規化は、また元気な時に。
まとめ
データベースの設計は楽しかったのだ、設計楽しい。まとめるの好き。
最近は刺身こんにゃくにハマっている。安くて日持ちしてうまい。
ダイエットにも最適かも。シュッと絞っていきますか。
でも運動はしたくない。
おわり。