[css]tableに入れたslick.jsの幅がおかしいときの対処法

知らんかった。

症状
対処法
原因とか
参考
活用シーン的な話

症状

コンテンツの大枠をtableで組んで、td内にslick.jsによるスライドを仕込んだ。

そしたらスライドの幅がえらくでかくなって使い物にならない。

対処法

tableのcssに一行加える。

<table>
    <tr>
        <td>
            <div class="slider">
                <div class="slide"><img src="***.jpg" alt=""></div>
                <div class="slide"><img src="***.jpg" alt=""></div>
                <div class="slide"><img src="***.jpg" alt=""></div>
            </div>
        </td>
    </tr>
</table>

table{
    table-layout: fixed;
}

原因とか

slick.jsの親要素にtableとかflexがあると幅の取得周りが上手くいかなくてこうなるらしい。

実数を入れたら制御できるようになるんだけど、それだとレスポンシブ対応の可変式で組みたい場合に都合が悪くなる。tableの子要素にtable-cellも入れろってあったけど今回は<table>を使ってるので元から入ってるため割愛。divとかでtable属性を付ける場合は注意。

参考

slick.jsを用いて、widthが制御できません

slick.jsを用いてスライダーを実装しようとしているのですが、どうも思い通りにいきません。 .slick-slideのwidthが子要素以上の大きさとなり、思い通りにレイアウトを組むことが出来ま

活用シーン的な話

今どきページのレイアウトを<table>で組むことは無いんだけど、例外的にLPは現役だったりする。リッチにしたいなって時に引っかかる事があると思う。