###やりたいこと
現在下記画像のようなテーブルを作成中です。
「プロジェクト名」の字数が多い場合に、レイアウトが崩れてしまいます。
やりたいことの具体的なイメージとしては、
プロジェクト名が長くなった場合、 ①文字を小さくして改行し、レイアウトを崩さない ②改行はせずに、プロジェクト名の部分を横スクロール可能にする
のどちらかで対応したいと思っています。
またテーブルのヘッダーをスクロール時に固定したいのですが、
そちらの方法も教えていただけると助かります。(縦スクロール時)
###試したこと
white-space: nowrap で改行を防いでみましたが、
それでもレイアウトがくずれてしまいました。
またヘッダー固定の件もwebで記事を見ながらやってみたのですが、
レイアウトが崩れてしまいなかなかうまく作成できません。。
###ソースコード
Ruby
1#edit.html.erb 2 3<span class = 'project-explanation'>メインプロジェクト</span> 4<% if @projects.present? %> 5 <div class = 'normal-project'> 6 <div class = 'sales-table-scroll'> 7 <table class = 'sales-table'> 8 <thead> 9 <tr class = project-header> 10 <%= content_tag :th, 'コード', class: 'sales-th' %> 11 <%= content_tag :th, 'プロジェクト名' , class: 'sales-th'%> 12 <%= content_tag :th, '開始日', class: 'sales-th' %> 13 <%= content_tag :th, '終了予定日', class: 'sales-th' %> 14 <%= content_tag :th, '売上金額', class: 'sales-th' %> 15 </tr> 16 </thead> 17 <tbody> 18 <% @projects.each do |project| %> 19 <tr> 20 <%= content_tag :td, project.project_code, class: 'sales-td' , id: 'sales-numeral'%> 21 <%= content_tag :td, project.project_name, class: 'sales-td' %> 22 <%= content_tag :td, project.start_date.strftime('%Y/%m/%d'), class: 'sales-td' %> 23 <%= content_tag :td, project.expected_end_date.strftime('%Y/%m/%d'), class: 'sales-td' %> 24 <%= content_tag :td, project.sales_amount.try(:to_s, :delimited), class: 'sales-td', id: 'sales-numeral' %> 25 </tr> 26 <% end %> 27 </tbody> 28 </table> 29 </div> 30 31 <%= form_for :sales, url: sale_path(params[:year]), html: { method: :patch } do |f|%> 32 <%= f.button 'メインプロジェクトを更新する', type: 'button', onclick: 'submit();', class: 'btn btn-success' %> 33 <div class = 'sales-table-amount'> 34 <table class = 'sales-table'> 35 <thead> 36 <tr> 37 <% n = 4 %> 38 <% 12.times do %> 39 <%= content_tag :th, "#{n}月", class: 'sales-th' %> 40 <% if n == 12 %> 41 <% n = 1 %> 42 <% else %> 43 <% n += 1 %> 44 <% end %> 45 <% end %> 46 </tr> 47 </thead> 48 49 <tbody> 50 <% @projects.each do |project| %> 51 <%# Salesの配列からプロジェクトIDで位置を指定し取り出す %> 52 <% project_sale = @project_sales[project.id] %> 53 <tr> 54 <% Sale::ALL_MONTH.each do |month| %> 55 <% sale = project_sale&.find{ |sale| sale.sales_date.month == month } %> 56 <td class = 'sales-td'><%= text_field_tag "sales_data[project_id][#{project.id}][#{month}][monthly_amount]", 57 sale&.monthly_amount, class:'sales-td', 58 id: 'sales-numeral', style: 'border: none;', data: { autonumeric: { mDec: 0 } }, 59 autocomplete: 'off', size: 9 %></td> 60 <%= hidden_field_tag "sales_data[project_id][#{project.id}][#{month}][project_id]", project.id %> 61 <%= hidden_field_tag "sales_data[project_id][#{project.id}][#{month}][id]", sale&.id %> 62 <%= hidden_field_tag "sales_data[project_id][#{project.id}][#{month}][year]", params[:year] %> 63 <% if month > 3 %> 64 <%= hidden_field_tag "sales_data[project_id][#{project.id}][#{month}][sales_date]", "#{params[:year]}/#{month}/01".to_date %> 65 <% else %> 66 <%= hidden_field_tag "sales_data[project_id][#{project.id}][#{month}][sales_date]", "#{params[:year].to_i + 1}/#{month}/01".to_date %> 67 <% end %> 68 <% end %> 69 </tr> 70 <% end %> 71 </tbody> 72 </table> 73 </div> 74 <% end %> 75 </div> 76<% else %> 77 <div class='nothing_data'> 78 <p>該当するプロジェクトデータがありません</p> 79 </div> 80<% end %>
Ruby
1#css 2.project-explanation{ 3 display: block; 4 text-align: center; 5 font-size: 30px; 6 margin-bottom: 2%; 7} 8 9.normal-project{ 10 display: flex; 11 overflow-y : auto; 12 background-color: ghostwhite; 13} 14 15.sales-table-scroll{ 16 height: 400px; 17 overflow-y : auto; 18 margin-top: 34px; 19} 20 21.sales-table th{ 22 padding: 15px 10px; 23 text-align: center; 24} 25 26.sales-table{ 27 border: 2px black solid; 28 table-layout: fixed; 29} 30 31.sales-table td{ 32 padding: 10px 10px; 33} 34 35.sales-table tr:nth-child(even){ 36 background: #eee; 37} 38 39.sales-table tr:hover{ 40 background: #ff0; 41} 42 43.sales-table-amount{ 44 height: 400px; 45 overflow-x : auto; 46 flex: 1; 47 width: 600px; 48} 49 50.sales-th, .sales-td{ 51 border: solid 1px #aaaaaa; 52 height: 20px !important; 53} 54 55.sales-th{ 56 background-color: mintcream; 57} 58 59#sales-numeral{ 60 text-align: right; 61}
宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/24 01:56 編集