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

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

ただいまの
回答率

89.21%

jQuery の DataTables で、文字列が長い場合でも列幅を固定させ、かつ横スクロールも表示させたい。

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 18K+

AKICO

score 7

前提・実現したいこと

asp.net でWEBアプリケーションを構築しています。
gridviewを使って、これにDataTablesを実装してテーブルにしたいと思っています。

gridviewに実装する前に、まずは単純なテーブルを作成して、DataTablesの設定をいろいろ試している段階です。
実現させたいことは、
1.列が例えば3列あるとし、それぞれの列の幅を固定したい。
・1列目:ID width:50px 
・2列目:氏名 width:100px 
・3列目:カナ氏名 width:100px 
2.テーブルの幅を固定、または%とし、これにはまらない場合は横スクロールバーを出したい。
・例として、テーブルの幅を、width:200pxとした場合、3列の合計が250pxなので、横スクロールバーを出す。
・2列目と3列目は、データが長くても指定の幅までの表示とし、折り返しもしない。(省略記号を表示させる)
3.1列目と2列目を固定とする。

です。

試したこと、課題

上記を実現させたく、

$("#table1").DataTable({
    //scroll true:スクロールあり false:スクロールなし 数値:その高さを超える場合にスクロール
    scrollY: "500px",
    scrollX: true,
    scrollCollapse: true,
    //ページング
    paging: true,
    //自動列幅計算
    autowidth: false,
    //列ごとの指定 パーセントは""で囲む、""で囲まない場合はpxとみなす(指定値+25pxの幅になる)
    columnDefs: [
        { targets: 0, width:  50 },
        { targets: 1, width: 150 },
        { targets: 2, width:  50 },
    ],
    //列固定:2列
    fixedColumns: {
        leftColumns: 2
    },
});


としてみたのですが、
<scrollX: true の設定がある場合>
→columnDefs:でのwidth設定が無視されてしまうようで、列幅が自動計算(指定したサイズよりも文字列の方が長くなる場合、文字列の幅に合わせられる)されてしまいました。
<scrollXの設定をはずした場合>
→columnDefs:でのwidth設定は無視されました。また、列幅は均等割されました。

これを、列幅を指定し、かつ、文字列が長い場合でも列幅は変更させないようにできないでしょうか?

上記設定の他に、列幅よりデータ幅が大きくなった場合に省略記号が出るように、

table {
    width: 80%;
    table-layout: fixed;     /* 列幅を固定 */
}
table th, td {
    white-space: nowrap;     /* 連続する半角スペース・タブ・改行を、1つの半角スペースとして表示 */
    overflow: hidden;        /* はみ出た部分を表示しない */
    text-overflow: ellipsis; /* はみ出た場合の表示方法(ellipsis:省略記号) */
}

↑上記の設定も入れています(が、scrollX: true の設定が入っているときはこれも無視されてしまうようで、省略記号表示されません)。

※先に、asp.netの質問としてhttps://teratail.com/questions/50112に投稿させていただいていました。問題がasp.netの問題ではなくなってきたので、改めて投稿させていただいた次第です。

他に、どのような設定が考えられますでしょうか?
ご指導、よろしくお願いいたします。

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

DataTables 1.10.12 
Bootstrap 3.3.6 
jQuery 2.2.3
(VisualStudio Community 2015(vb))

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

前のスレッドで以下の記事を紹介しましたが読んでいただけましたか?

GridView に overflow 適用
http://surferonwww.info/BlogEngine/post/2015/11/10/apply-overflow-to-a-column-of-gridview.aspx

当該列を TemplateField に変換し、それに div 要素を配置して overflow 他のスタイルを適用、div 要素の中に Label か Literal コントロールを配置してその Text プロパティをデータバインドするという方法が書いてあります。

三点リーダーを表示するならその記事の下の方の「2015/11/12 追記」に書いてあるスタイルを div 要素に適用すればよいです。(それにより、前のスレッドのサンプルコードに書いた table { ... } と table th, td { ... } は不要になります。削除してください)

また、columnDefs: [ ... ] の設定も不要です。

お試しください。

なお、こちらでは、前のスレッドのサンプルコードで、上記の点を修正してうまく行くことを確認済みです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/18 19:16

    一つだけ、height: 1.1em; は不要だと思います。

    あとは分かりません。認識が誤っているかどうかは話をしているベース(サンプルコード)が違うので何とも言えません。Bootstrap というのも自分は考えてませんし・・・

    ID の列の表示が思ったようにならないのは、ツールを使ってどのようなスタイルが適用されているか調べて、対応してください。

    キャンセル

  • 2016/10/19 09:27

    SurferOnWww様、ご回答ありがとうございます。

    書き方が悪くてすみません、
    --------------------------------------------------
    2.headerとbodyで、列がずれた
    --------------------------------------------------
    の部分ですが、
    <asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="false" >
    のように、装飾を何もしないとズレてしまったのですが、
    サイト全体に使用している「Bootstrap」をCssClassに適用したところズレがなくなったので、よしとしました。(なので、Bootstrapを適用させてズレたのではありませんでした)
    同様に、IDの列の表示についても、「Bootstrap」を適用する前から狭い状態です。
    div.clm-ID { ~~}しか適用されないものと認識していたのですが…
    デベロッパーツールを使って、確認してみます。

    また、認識に誤りがあるか、どうか、は、SurferOnWww様がご回答くださった、
    --------------------------------------------------
    前に紹介した記事「GridView に overflow 適用」のサンプルコードに DataTables を実装するのではなくて、前のスレッドの私の回答に中にアップしたサンプルコード(それには DataTables は実装済み)を修正
    --------------------------------------------------
    の部分について、三点リーダーの適用をしていったところ、「前のスレッドのサンプルコード」よりも「GridView に overflow 適用」に近いコードになったので、私が何か勘違いしているのか?と思ってでした。

    キャンセル

  • 2016/10/19 10:37

    「デベロッパーツールを使って、確認してみます」という件、結果を連絡いただけると幸いです。(解決できたのであれば解決策の連絡もお願いします)

    キャンセル

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

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