先日Excelから表をコピーしてきてWordPressに貼り付けて、そのtableに色を付けたいという「アイデア出せやコラ」っていう脅迫めいたお願いごとがあったときのお話をば少々。
ExcelからWordPressにコピペするのはPCにあまり詳しくないエンドユーザーさん。
なので「色付けたいところにclass付けてくださいよー」とかは無理。
諸事情あってUltimate TinyMCEやCKEditorの採用も無理とのこと。
要するにCSSだけでどうにかしてね♡ってことらしい。
何をやらなきゃいけないか？
やりたかったことは画像のように列で色を変えたいということ。
※実際はこんな単純な表じゃなて結合ありのちょっと複雑うな表です。
もちろんtdに無闇矢鱈にスタイルを付けてしまうと、他のtableに影響がでますからダメってことです。
閃いた！width属性つかって属性セレクタでどうにかしてみよう！
まず最初に閃いたのはwidthで属性セレクタを使ったやっちゃおうと思ったんですが、どうやらExcelから表をコピペすると1行目にしかwidth属性が入らずダメでした・・・。
けっきょくやったこと
けっきょく擬似セレクタのnth-childを使ってできました。
See the Pen LpmvMj by mitsuki sagayama (@sagayama) on CodePen.
IEは9+ですが、この際仕方ないので・・・
まとめ
他にも方法はありますが、例えばテンプレート側にclassを入れるとか・・・それすらやらしてもらえないぐらいガチガチに成約があったんです。
とかなんとか言いながらIE9+でいいんかい！って突っ込みたくなりましたがねwww
