bootstrap4で生成したtableの縦幅を固定したい（table内に設置している要素の縦幅によらず）

Question

前提・実現したいこと

table内に設置している要素の縦幅が変わったときでも、

tableの縦幅を固定したい。

(bootstrap 4系を使用しております）

発生している問題・エラーメッセージ

中のコンテンツの縦幅が変わると、tableの縦幅が変わってしまう。

中の猫の画像の縦幅が、400px。

この時tableの縦幅が424.44px。

なのですが、

猫の画像が増え、画像の縦幅が縮小した時、

中の猫の画像の縦幅が、237px。

この時tableの縦幅が462.22pxとなり、

縦幅が小さくなってしまいます。

※ 中のコンテンツの大きさが変わるのは、

imgに対してbootstrapのimg-fluidというクラスを付与し、

レスポンシブ対応しているからです。

（要件にレスポンシブ対応が必須なのでつけています）

該当のソースコード

codepenにおきました。

codepen

内容は以下のとおりです。

  <table class='table table-bordered'>
    <thead>
      <tr>
        <th>
          <img src="https://pbs.twimg.com/profile_images/3406268893/54b7e1f981b7df7c817af48d1b96ad5e_400x400.jpeg" alt="" class='img-fluid'>       
      </th>
        <th>
          <img src="https://pbs.twimg.com/profile_images/3406268893/54b7e1f981b7df7c817af48d1b96ad5e_400x400.jpeg" alt="" class='img-fluid'>       
      </th>
        <th>
          <img src="https://pbs.twimg.com/profile_images/3406268893/54b7e1f981b7df7c817af48d1b96ad5e_400x400.jpeg" alt="" class='img-fluid'>       
      </th>
      </tr>
    </thead>
  </table>

試したこと

• tableタグに縦幅を指定。

<table class='table table-bordered' style='height: 100px'>

だめでした。

• theadタグに縦幅を指定

    <thead style='height: 100px'>

• tr, thタグに縦幅を指定。

    <tr style='height: 100px'>

    <th style='height: 100px'>

こちらもだめでした。

どうしたらtableの縦幅が固定されるのか、検討がつかなくなってまいりましたので、

教えていただけると助かります。

どうぞよろしくお願いいたします。

Answer 1

tableのセル（th, td）にはheight, min-height, max-height等が効きませんので、セルの内容を div でラッピングする必要があります。

（略）
  <th>
    <div class="neko">
      <img ....>
    </div>
  </th>
（以降のthでも同様にラッピング）

.neko {
  min-height: 400px;
}

これで、画像が小さくなった時でも常に最大の縦幅が適用されます。画像の上下に余分な隙間ができます。
ご参考になれば。

Comments

[efcode]

min-heightでなくmax-heightじゃないかな　質問者さん、この方の回答がどう動かないのかどう意図しないかのコメントを付けた方が、前へ進める可能性が高くなると思いますよ、divを入れられない、入れたくないのであれば他のアプローチになりますし