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

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

ただいまの
回答率

91.01%

  • HTML

    7541questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Bootstrap

    807questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • Thymeleaf

    135questions

    Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

画面に表示されたデータを固定して表示したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 194

Ika3242

score 6

前提・実現したいこと

Bootstrapを使って、テーブルを表示する画面を作ったのですが、DBのカラムが多く横に広がってしまっています。
そのため始めのデータを固定して横スクロールにして見れるようにしたいです。
<th>タグにclass要素を追加して固定すると思うのですが何を入力すれば良いのでしょうか?

以下のようにIDとnameの部分を固定して横にスクロールするとageとweightは見えなくなる。といった形のものを作成したいです。(値は適当です。)
何分初めての質問なので何をしたいかでも伝わっていただけると嬉しいです。。。

_____________________
|ID|name|age|weight(kg)|height(cm)|BMI|
|00|aaaa| 10|        40|       140| 20|
--------------------ー
|← 固定→|←          スクロール        →|

右にスクロール
_____________
|ID|name|height(cm)|BMI|
|00|aaaa|       140| 20|
-------------
|← 固定→|← スクロール  →|

試してみたこと

追記:9/20
CSSで".lock"を作成
今後の汎用性も考えて<th class="lock">~~</th>とすると固定して表示するようにしたいです。
しかし、.lock要素を追加するとタグがすべて重なってしまい、データを見ることができない。
.lockを要素に追加したら、重ならずに横並びするようにしたいです。

簡易なソースコード

<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <title>Hello Thymeleaf</title>
    </head>
    <body>
     <div class="scroll-table-wrap">
      <table class="table-hover">
       <thead>
        <tr>
         <!-- 固定したいデータ -->
         <th class="lock">ID</th> 
         <th class="lock">name</th>
         <!-- スクロールできるデータ -->
         <th>age</th>
         <th>weight</th>
         <th>height</th>
         <th>BMI</th>
        </tr>
       </thead>
       <tbody>
        <tr>
         <td class="lock">00</td>
         <td class="lock">aaaa</td>
         <td>10</td>
         <td>40</td>
         <td>140</td>
         <td>20</td>
        </tr>
       </tbody>
      </table>
     </div>
    </body>
</html>
/** テーブルデータの列を左側に固定*/
.lock {
  display: inline;
  overflow: overlay;
  position: absolute;
  text-align: center;
}

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

Spring boot
thymeleaf

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/09/19 19:50

    質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

    キャンセル

  • Ika3242

    2017/09/19 22:31

    ご指摘ありがとうございます。内容を取り込んでいると感じていただけたら幸いです。

    キャンセル

  • kei344

    2017/09/19 22:37

    「ご自身で試されたコード」が見当たりませんが・・・。

    キャンセル

回答 2

checkベストアンサー

+1

DataTables には一部だけのスクロールがないみたいですね。
代わりに、Fixed Midashi を挙げておきます。
https://blog.apar.jp/program/4342/

-- 以下、修正前投稿

昔から需要はあったと思うのですが、いまだに簡単に実装する方法がありません。
そこで、jQueryを利用したDataTablesを使ってみてはどうでしょうか?
Bootstrap を使っているようですが、これは Bootstrap のスタイルも利用できます。

DataTables Table plug-in for jQuery
https://datatables.net/

DataTablesの使い方
http://qiita.com/nissuk/items/7ac59af5de427c0585c5

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/20 14:59

    回答ありがとうございます。もう少し現状で検討してから試させていただきます。

    キャンセル

  • 2017/09/21 09:35

    実装したらすぐできました!教えていただきましてありがとうございます!

    キャンセル

+1

Table with fixed header and sidebar
Bootstrapは使われてませんが、参考になるかもしれません。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/20 14:58

    回答ありがとうございます。参考にしてみます。

    キャンセル

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

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

関連した質問

  • 解決済

    thymeleaf sec tag

    Springで画面デザインにThymeleafを使用しています。 認証にSpring securityを使用しており、権限で表示を切り替える際、以下のようにすると思います。

  • 解決済

    thymeleafのブロック変数に代入

    前提・実現したいこと thymeleafのth:withで設定した変数の値を書き換えたい場合はどうすればいいでしょうか? おそらくイレギュラーな使い方だと思いますが・・

  • 解決済

    thymeleaf で関数の引数に文字列を利用したい

    thymeleafで以下のような感じで引数に文字列を利用したいのですがどう記述すればいいのかわかりません。 どなたか教えていただけないでしょうか <div th:text=

  • 解決済

    Thymeleafでcheckboxが動作しない

    Thymeleaf初心者です。 Thymeleafでcheckboxが動作しない現象が起きております。 <input class="sample" type="check

  • 解決済

    テーブルの行の中でテキストボックスの動的追加

    Java SpringBoot thymeleafを使ってものすごく簡単なアプリケーションを作成したい HTML、Thymeleaf,javascriptを使用している環境です

  • 解決済

    ThymeleafでPOSTされた値を画面に出力したい

    こんにちは、SpringBoot、ThymeleafをつかってHTMLでつくられた固定値の入ったテーブルを表示し、 空白のカラムなどを追加してデータの変更を受付けsubmitするこ

  • 解決済

    Thymeleaf:ネストth:eachの内側で使用するシーケンスを作りたい

    ※Thymeleafの掲示板にも質問は投げましたが、日本語の回答がいただければなお助かるので、teratailさんにも投稿します。 前提・実現したいこと 複数のth:eachの

  • 受付中

    Thymeleafの${}と*{}を併用はできない?

    Thymeleafにの記述の仕方で、以下の二通りは別々に使う分には問題なく利用出来ております。 <!-- $で直接参照 --> <th:block th:text="${for

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

  • HTML

    7541questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Bootstrap

    807questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • Thymeleaf

    135questions

    Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。