Q&A
現在のコードを掲示してください。
現在テーブルの高さ統一をしたいと考えています。
使用環境は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/
です。
何かいい方法ご存知の方おられましたらご教示いただけますと幸いです。
回答2件
0
調べてみましたがtableでは難しそうです。（私か知らないだけかもしれませんが。）
tableはやめて CSS Flexbox か CSS Grid でテーブルレイアウトにするHTMLに変更するか、
HTMLが変更不可なら、CSSで無理やり Flexbox にするかでしょうか。
コード例
html
1<table class="tg"> 2 <tr> 3 <td>ああああああああああああああああああああああああああああああああああああああああああああああ</td> 4 <td>いいい</td> 5 </tr> 6 <tr> 7 <td class="tg-0pky">あああ</td> 8 <td class="tg-0pky">いいいいいいいいいいいいいいいいいい</td> 9 </tr> 10</table>
css
1.tg tr { 2 display: flex; 3} 4.tg td { 5 border:1px solid black; 6 font-size: 16px; 7 width: 100px; 8 height: 40px; 9 overflow-y: auto; 10} 11
投稿2020/08/03 04:29
総合スコア34075
ありがとうございます。
解決方法は記載しました。
flexは僕も試したのですが、微妙にいちがずれてうまく行っていなかったんです。
tdの要素がinlineになっているのはわからなかったです。
なんで取得した情報を全部表示しないと気が済まないのとheightが反映されないのも納得です。
td内にdivを入れるのも考えましたが、htmlの修正が面倒そうなので、flexで回答しました。
位置の調整はCSSでなんとでもなるとは思います。
おお。そうなんですね！！
ありがとうございます。
今度flexの方でも試してみます！！
0
自己解決
tdの後にdivタグを入れて
display: inline-block(blockでも同じ）
height: 100px;
overflow: scroll;
で行けましたわ。
ありがとうございます！！
投稿2020/08/03 04:46
総合スコア41
あなたの回答
tips
プレビュー
