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

Question

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

gridviewに実装する前に、まずは単純なテーブルを作成して、DataTablesの設定をいろいろ試している段階です。
実現させたいことは、
1.列が例えば3列あるとし、それぞれの列の幅を固定したい。
・1列目：ID width:50px
・2列目：氏名 width:100px
・3列目：カナ氏名 width:100px
2.テーブルの幅を固定、または%とし、これにはまらない場合は横スクロールバーを出したい。
・例として、テーブルの幅を、width：200pxとした場合、３列の合計が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))

Answer 1

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

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: [ ... ] の設定も不要です。

お試しください。

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

Comments

[AKICO]

SurferOnWww様、ご回答ありがとうございます。
そしてこの度もご支援いただき、ありがとうございます。

横スクロールした際の列の固定や、列幅の固定などはDataTablesで行った方がいいのかと考え、まずは普通に<TABLE>～</TABLE>でテーブルを作成し、それへDataTablesの実装を試していたため、
前のスレッドで紹介してくださっていました、
----------------------------------------
GridView に overflow 適用
http://surferonwww.info/BlogEngine/post/2015/11/10/apply-overflow-to-a-column-of-gridview.aspx
----------------------------------------
に対し、DataTablesを実装することは試していませんでした。
（申し訳ありません、少しずつでないと理解ができなくて…）

これから、「GridView に overflow 適用」の記事を確認し、ご報告させていただいたいと思います。

[退会済みユーザー]

誤解しているかもしれませんので一言・・・

前に紹介した記事「GridView に overflow 適用」のサンプルコードに DataTables を実装するのではなくて、前のスレッドの私の回答に中にアップしたサンプルコード（それには DataTables は実装済み）を修正するのですよ。やり方が分からなければ連絡してください。

[AKICO]

SurferOnWww様、追記をありがとうございました！

最終的に三点リーダーの表示も行いたいため、SurferOnWww様が教えて下さった通り、
TemplateField への変換と、DataTablesの実装を行ったところ、以下の通り、ほぼ「GridView に overflow 適用」となりましたが、認識が誤ってますでしょうか？

※横スクロールの確認がしにくかったので、
・1列目：ID width:100px
・2列目：氏名 width:150px
・3列目：カナ氏名 width:150px
・テーブルの幅： width:300px
としてテスト
------------------------------------------------------------------------------------------
<style type="text/css">
div.clm-ID {
width:100px;
overflow: hidden; /* はみ出た部分を表示しない */
white-space: nowrap;
text-overflow: ellipsis;
height: 1.1em;
}
div.clm-Name {
width:150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 1.1em;
}
div.clm-NameKana {
width:150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 1.1em;
}
</style>
------------------------------------------------------------------------------------------
<div style="width:200px">
<asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate><div class="clm-ID">
<asp:Literal ID="Literal1" runat="server" Text='<%# Eval("ID") %>'></asp:Literal>
</div></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NAME">
<ItemTemplate><div class="clm-Name">
<asp:Literal ID="Literal2" runat="server" Text='<%# Eval("Name") %>'></asp:Literal>
</div></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NAMEKana">
<ItemTemplate><div class="clm-NameKana">
<asp:Literal ID="Literal3" runat="server" Text='<%# Eval("NameKana") %>'></asp:Literal>
</div></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
------------------------------------------------------------------------------------------
$("#<%= GridView3.ClientID %>").DataTable({
scrollX: true,
paging: true,
//列固定：2列
fixedColumns: {
leftColumns: 2
},
});
------------------------------------------------------------------------------------------
上記にしたところ、ほぼ希望通りに実装できました。
希望通りとはならなかったところは、
1.上記の「ID」の列で、指定幅(width:100px)よりも文字列幅(というのでしょうか？)が小さい場合、width：100pxとならず、文字列幅にあわせたくらいの狭さになった。
2.headerとbodyで、列がずれた
　→デザイン「Bootstrap」を使っており、試しに
<asp:GridView ID="GridView3" CssClass="table-bordered table-condensed table-hover table-striped" runat="server" AutoGenerateColumns="false" >
　　としたところ、ズレはなくなったので、OK

認識が誤っていましたら、教えてください。

[退会済みユーザー]

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

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

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

[AKICO]

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 適用」に近いコードになったので、私が何か勘違いしているのか？と思ってでした。

[退会済みユーザー]

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