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

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

ただいまの
回答率

87.35%

テーブル、tdタグ内の文字数が多い時にレイアウトを維持したい・テーブルのヘッダーを固定したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,970

score 66

やりたいこと

現在下記画像のようなテーブルを作成中です。
イメージ説明

「プロジェクト名」の字数が多い場合に、レイアウトが崩れてしまいます。
イメージ説明

やりたいことの具体的なイメージとしては、

プロジェクト名が長くなった場合、
①文字を小さくして改行し、レイアウトを崩さない
②改行はせずに、プロジェクト名の部分を横スクロール可能にする


のどちらかで対応したいと思っています。

またテーブルのヘッダーをスクロール時に固定したいのですが、
そちらの方法も教えていただけると助かります。(縦スクロール時)

試したこと

white-space: nowrap で改行を防いでみましたが、
それでもレイアウトがくずれてしまいました。

またヘッダー固定の件もwebで記事を見ながらやってみたのですが、
レイアウトが崩れてしまいなかなかうまく作成できません。。

ソースコード

#edit.html.erb

<span class = 'project-explanation'>メインプロジェクト</span>
<% if @projects.present? %>
  <div class = 'normal-project'>
    <div class = 'sales-table-scroll'>
      <table class = 'sales-table'>
        <thead>
          <tr class = project-header>
            <%= content_tag :th, 'コード', class: 'sales-th' %>
            <%= content_tag :th, 'プロジェクト名' , class: 'sales-th'%>
            <%= content_tag :th, '開始日', class: 'sales-th' %>
            <%= content_tag :th, '終了予定日', class: 'sales-th' %>
            <%= content_tag :th, '売上金額', class: 'sales-th' %>
          </tr>
        </thead>
        <tbody>
        <% @projects.each do |project| %>
          <tr>
            <%= content_tag :td, project.project_code, class: 'sales-td' , id: 'sales-numeral'%>
            <%= content_tag :td, project.project_name, class: 'sales-td' %>
            <%= content_tag :td, project.start_date.strftime('%Y/%m/%d'), class: 'sales-td' %>
            <%= content_tag :td, project.expected_end_date.strftime('%Y/%m/%d'), class: 'sales-td' %>
            <%= content_tag :td, project.sales_amount.try(:to_s, :delimited), class: 'sales-td', id: 'sales-numeral' %>
            </tr>
        <% end %>
        </tbody>
      </table>
    </div>

    <%= form_for :sales, url: sale_path(params[:year]), html: { method: :patch } do |f|%>
    <%= f.button 'メインプロジェクトを更新する', type: 'button', onclick: 'submit();', class: 'btn btn-success'  %>
      <div class = 'sales-table-amount'>
        <table class = 'sales-table'>
          <thead>
            <tr>
              <% n = 4 %>
              <% 12.times do %>
                <%= content_tag :th, "#{n}月", class: 'sales-th' %>
                <% if n == 12 %>
                  <% n = 1 %>
                <% else %>
                  <% n += 1 %>
                <% end %>
              <% end %>
            </tr>
          </thead>

          <tbody>
            <% @projects.each do |project| %>
              <%# Salesの配列からプロジェクトIDで位置を指定し取り出す %>
              <% project_sale = @project_sales[project.id] %>
               <tr>
                 <% Sale::ALL_MONTH.each do |month| %>
                   <% sale = project_sale&.find{ |sale| sale.sales_date.month == month } %>
                     <td class = 'sales-td'><%= text_field_tag "sales_data[project_id][#{project.id}][#{month}][monthly_amount]",
                              sale&.monthly_amount, class:'sales-td',
                              id: 'sales-numeral', style: 'border: none;', data: { autonumeric: { mDec: 0 } },
                              autocomplete: 'off', size: 9 %></td>
                     <%= hidden_field_tag "sales_data[project_id][#{project.id}][#{month}][project_id]", project.id %>
                     <%= hidden_field_tag "sales_data[project_id][#{project.id}][#{month}][id]", sale&.id %>
                     <%= hidden_field_tag "sales_data[project_id][#{project.id}][#{month}][year]", params[:year] %>
                     <% if month > 3 %>
                       <%= hidden_field_tag "sales_data[project_id][#{project.id}][#{month}][sales_date]", "#{params[:year]}/#{month}/01".to_date %>
                     <% else %>
                       <%= hidden_field_tag "sales_data[project_id][#{project.id}][#{month}][sales_date]", "#{params[:year].to_i + 1}/#{month}/01".to_date %>
                     <% end %>
                   <% end %>
                </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% end %>
  </div>
<% else %>
  <div class='nothing_data'>
    <p>該当するプロジェクトデータがありません</p>
  </div>
<% end %>
#css
.project-explanation{
    display: block;
    text-align: center;
    font-size: 30px;
    margin-bottom: 2%;
}

.normal-project{
    display: flex;
    overflow-y : auto;
    background-color: ghostwhite;
}

.sales-table-scroll{
    height: 400px;
    overflow-y : auto;
    margin-top: 34px;
}

.sales-table th{
    padding: 15px 10px;
    text-align: center;
}

.sales-table{
    border: 2px black solid;
    table-layout: fixed;
}

.sales-table td{
    padding: 10px 10px;
}

.sales-table tr:nth-child(even){
    background: #eee;
}

.sales-table tr:hover{
    background: #ff0;
}

.sales-table-amount{
    height: 400px;
    overflow-x : auto;
    flex: 1;
    width: 600px;
}

.sales-th, .sales-td{
    border: solid 1px #aaaaaa;
    height: 20px !important;
}

.sales-th{
    background-color: mintcream;
}

#sales-numeral{
    text-align: right;
}

宜しくお願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

プロジェクト名が長くなった時に
セル内で文字を折り返してレイアウトを崩さないようにしたいなら、
word-break: break-all;を指定してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/24 10:55 編集

    試した結果、''white-space: nowrap;''との組み合わせでうまくいきました。
    ありがとうございました。

    キャンセル

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

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • HTMLに関する質問
  • テーブル、tdタグ内の文字数が多い時にレイアウトを維持したい・テーブルのヘッダーを固定したい