質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

Q&A

0回答

257閲覧

テーブル要素 幅の調整方法について(Rails・bootstrap4.1.1)

kanix2020

総合スコア6

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

0グッド

0クリップ

投稿2021/02/15 06:47

編集2021/02/15 06:53

前提・実現したいこと

bootstrap4を使用し、を使用し、ビューを整えているところですが、
テーブル要素がうまくブラウザ幅に収まってくれません。。
(Gyazo:ブラウザ幅に合わない動画

表示しているブラウザ幅に合わせてテーブルを表示させたいのですが、
どうしてもうまくいきません。参考記事や何かヒントなどがございましたら
ご教授をお願いいたします。

該当のソースコード

ruby

1**appliication.html.erb** 2 3 4<!DOCTYPE html> 5<html> 6 <head> 7 <title>Gymnas</title> 8 <%= csrf_meta_tags %> 9 <%= csp_meta_tag %> 10 11 12 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 13 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 14 15 </head> 16 17 <body> 18 <%= yield %> 19 </body> 20</html>

ruby

1**index.htm.erb** 2 3 4 <header> 5 <nav class="navbar navbar-dark bg-dark flex-md-nowrap p-0 shadow"> 6 <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">ユーザー名</a> 7 8 <ul class="navbar-nav px-3"> 9 <li class="nav-item text-nowrap"> 10 <a class="nav-link" href="#">サインアウト</a> 11 </li> 12 </ul> 13 </nav> 14 </header> 15 16__「★問題箇所ここから」__ 17 <div class="row"> 18 <div class="col-2"> 19 <div class="sidebar side-color"> 20 固定するコンテンツ 21 </div> 22 </div> 23 <div class="col-1"> 24 <div class="alt-table-responsive"> 25 <table class="table table-bordered mt-5"> 26 <thead> 27 <tr> 28 <th> </th> 29 <th colspan="2">FX</th> 30 <th colspan="2">PH</th> 31 <th colspan="2">Ri</th> 32 <th colspan="2">Vo</th> 33 <th colspan="2">PB</th> 34 <th colspan="2">HB</th> 35 </tr> 36 </thead> 37 <tbody> 38 <form type="number"> 39 <tr> 40 <th rowspan="2">名前</th> 41 <td><input type="text" name="FX_D_1" value="">  </td> 42 <td rowspan="2" id="score_FX" value="">  </td> 43 <td><input type="text" name="PH_D_1">  </td> 44 <td rowspan="2">  </td> 45 <td><input type="text" name="Ri_D_1">  </td> 46 <td rowspan="2">  </td> 47 <td><input type="text" name="Vo_D_1">  </td> 48 <td rowspan="2">  </td> 49 <td><input type="text" name="PH_D_1">  </td> 50 <td rowspan="2">  </td> 51 <td><input type="text" name="HB_D_1">  </td> 52 <td rowspan="2">  </td> 53 </tr> 54 55 <tr> 56 <td><input type="text" name="FX_E_1" value="">  </td> 57 <td><input type="text" name="PH_E_1">  </td> 58 <td><input type="text" name="Ri_E_1">  </td> 59 <td><input type="text" name="PB_E_1">  </td> 60 <td><input type="text" name="Vo_E_1">  </td> 61 <td><input type="text" name="HB_E_1">  </td> 62 </tr> 63 </form> 64 </tbody> 65 </table> 66 </div> 67 </div> 68  </div> 69__「★問題箇所ここまで」__ 70 71 72

推測

<div class="row"> の記述の中にテーブルがあるため、その幅の中にテーブルが収まってくれると思ったのですが... 説明不足な点がありましたら恐れ入りますがご指摘をお願いいたします。 よろしくお願いします。

補足情報(FW/ツールのバージョンなど)

ブラウザ:Chrome
bootstrap:4.1.1
ruby:2.6.5
rails:6.0.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/02/23 01:17

質問タグにBootstrap,Ruby on Rails 追加してください。 div だけだと https://teratail.com/tags/div タグ登録者18人という現状から期待できないと思います(たまたまタグ絞り込み解除したから見つけましたあ・・・)
kanix2020

2021/02/23 03:36

こんにちは なるほど、、今後は気を付けてみます! ご指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問