bootstarp3でのテーブルの高さ統一

Question

現在テーブルの高さ統一をしたいと考えています。

使用環境はBootstrap3

trタグやtdタグにheight=100pxやclass=h-25などを記載しているのですが、

データの量によってはheight=617pxなど指定したcssを無視して表示されています。

こう言った時はどのようにすればよろしいでしょうか？

希望する方法としては
テーブルのtdの高さを全ての行で統一したい

オーバーした文字列は非表示orスクロールにしたい。

試した記事

https://qiita.com/sky-net/items/b2f7d7d5ebd5c8d0b5f2

https://www.sidethree.co.jp/blog/memo/201607.html

https://namagomi-days.com/grid-system-height/

です。

何かいい方法ご存知の方おられましたらご教示いただけますと幸いです。

Comments

[akihiro3]

現在のコードを掲示してください。

Answer 1

調べてみましたがtableでは難しそうです。（私か知らないだけかもしれませんが。）

tableはやめて CSS Flexbox か CSS Grid でテーブルレイアウトにするHTMLに変更するか、
HTMLが変更不可なら、CSSで無理やり Flexbox にするかでしょうか。

コード例

<table class="tg">
  <tr>
    <td>ああああああああああああああああああああああああああああああああああああああああああああああ</td>
    <td>いいい</td>
  </tr>
  <tr>
    <td class="tg-0pky">あああ</td>
    <td class="tg-0pky">いいいいいいいいいいいいいいいいいい</td>
  </tr>
</table>

.tg tr {
  display: flex;
}
.tg td {
  border:1px solid black;
  font-size: 16px;
  width: 100px; 
  height: 40px;
  overflow-y: auto;  
}

Comments

[kazumasamatsumo]

ありがとうございます。
解決方法は記載しました。

flexは僕も試したのですが、微妙にいちがずれてうまく行っていなかったんです。
tdの要素がinlineになっているのはわからなかったです。
なんで取得した情報を全部表示しないと気が済まないのとheightが反映されないのも納得です。

[hatena19]

td内にdivを入れるのも考えましたが、htmlの修正が面倒そうなので、flexで回答しました。
位置の調整はCSSでなんとでもなるとは思います。

[kazumasamatsumo]

おお。そうなんですね！！
ありがとうございます。
今度flexの方でも試してみます！！

Answer 2

tdの後にdivタグを入れて
display: inline-block(blockでも同じ）
height: 100px;
overflow: scroll;

で行けましたわ。
ありがとうございます！！