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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

2回答

9992閲覧

テーブルのセル内で改行をせずに、三点リーダーにしたい(asp.net、Datatables)

AKICO

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

0クリップ

投稿2016/10/03 09:25

編集2022/12/20 11:35

###前提・実現したいこと
asp.netのGridViewを使っています。
(最終的には、GridViewにDataTablesを適用させたいと思っています。)
GridViewで、
・1列目:ID width:50px
・2列目:氏名 width:100px
・3列目:カナ氏名 width:100px
とし、
・gridview全体の幅を200pxにする。列を合計すると250になるので、横スクロールもつける
・2列目と3列目は、width指定の幅を超えるようであれば3点リーダ(…)をつける。
・ ↑ は、改行させない、幅も固定
としたいと考えました。

###できたことと、課題
横スクロールは、DataTablesを実装する部分で、

javascript

1$("#GridView1").DataTable({ 2 scrollX: true, 3 scrollY: "200px", 4 scrollCollapse: true, 5 //ページング 6 paging: true, 7 //列ごとの指定 幅:widthで指定したpx+25px 8 columnDefs: [ 9 { width: 50, targets: 0 }, 10 { width: 100, targets: 1 }, 11 { width: 100, targets: 2 }, 12 ], 13 //列固定:1列 14 fixedColumns: { 15 leftColumns: 1 16 }, 17});

とすることで実装できそうなのですが、3点リーダをつける部分がわかりません。
ボックスなどであれば、

css

1div.santen{ 2 text-overflow: ellipsis; 3 overflow: hidden; 4 white-space: nowrap; 5}

html

1<div class="santen" style="width:100px"> 2 三点三点三点三点三点三点三点三点三点三点三点三点 3</div>

で三点リーダになることは確認できました。
GridView、DataTablesの前に、まずTableのtdで試してみようと思ったのですが、

css

1table.table250{ 2 width :250px; 3 overflow:hidden; 4} 5td{ 6 overflow :hidden; 7 text-overflow:ellipsis; 8 white-space :nowrap; 9 color : rgb(255,0,0); 10}

html

1<table class="table250"> 2 <tr> 3 <td style="width:50px;">1</td> 4 <td style="width:100px;">氏名氏名氏名氏名氏名氏名</td> 5 <td style="width:100px;">カナカナカナカナカナカナカナカナ</td> 6 </tr> 7</table>

としましたが、width指定が無視され、文字がすべて表示されてしまいました。
(改行はされませんでしたが…)

もしかしたら、DataTablesやBootStrap、jQueryで指定する方法があるかもと思い、質問させていただきました。

どうかよろしくお願いいたします。

###補足情報(言語/FW/ツール等のバージョンなど)
VisualStudio Community 2015(vb)
DataTables 1.10.12
Bootstrap 3.3.6
jQuery 2.2.3

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

私も同じようなことがしたく、同様の現象になりましたが、datatablesのオプションで

"autoWidth": false

としたら上手くいきました。

投稿2022/12/20 02:35

MASUFISH

総合スコア21

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

質問の内容が理解できていませんが「三点リーダーにしたい」ということは、以下の記事の最後の方に書いてある「2015/11/12 追記」のような表示にしたいということですか?

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

【2016/10/4 12:45 追記】

私の 2016/10/04 12:08 のコメントでも書きましたが、td 要素に overflow: hidden;、white-space: nowrap;、text-overflow: ellipsis; というスタイルを適用して期待通り三点リーダーが表示されたのは、親の table 要素に table-layout: fixed; というスタイルが適用されていたからでした。

DataTables にはもともと「三点リーダー」にするようなスタイルは適用されていないようですが、そうであれば親の table 要素に table-layout: fixed; というスタイルを、子の th, td 要素に overflow: hidden;、white-space: nowrap;、text-overflow: ellipsis; というスタイルを適用したらいかがでしょう?

コメントに「あとで、回答欄に GridView ではどのようにできるかという例を書いておきます」と書きましたが、検証に使ったサンプルコードを以下に書いておきます。Web サイトプロジェクトならそのままコピペして、Web アプリケーションプロジェクトなら .aspx と .aspx.cs に分ければ試すことができますので、興味があればやってみてください。

<%@ Page Language="C#" %> <%@ Import Namespace="System.Data" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> // データソース用の DataTable を作成 protected DataTable CreateDataTable() { DataTable dt = new DataTable(); DataRow dr; dt.Columns.Add(new DataColumn("ID", typeof(Int32))); dt.Columns.Add(new DataColumn("Name", typeof(string))); dt.Columns.Add(new DataColumn("Type", typeof(string))); dt.Columns.Add(new DataColumn("Price", typeof(Int32))); dt.Columns.Add(new DataColumn("Qty", typeof(Int32))); dt.Columns.Add(new DataColumn("Amount", typeof(Int32))); dt.Columns.Add(new DataColumn("CategoryID", typeof(Int32))); dt.Columns.Add(new DataColumn("Note", typeof(string))); dt.Columns.Add(new DataColumn("Discontinued", typeof(bool))); dt.Columns.Add(new DataColumn("DateTime", typeof(DateTime))); for (int i = 0; i < 20; i++) { dr = dt.NewRow(); dr["ID"] = i; dr["Name"] = "Product Name_" + i.ToString(); dr["Type"] = "Product Type " + (100 - i).ToString(); dr["Price"] = 123000 * (i + 1); dr["Qty"] = (i + 1) * 20; dr["Amount"] = 123000 * (i + 1) * (i + 1); dr["CategoryID"] = 100 - i; dr["Note"] = "Note_" + i.ToString(); dr["Discontinued"] = (i % 2 == 0) ? true : false; dr["DateTime"] = DateTime.Now.AddDays(i); dt.Rows.Add(dr); } return dt; } // GridView に上記メソッドで作った DataTable をバインド protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { GridView1.DataSource = CreateDataTable(); GridView1.DataBind(); } } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> table { width: 100%; table-layout: fixed; } table th, td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server" EnableViewState="False"> </asp:GridView> </form> </body> </html>

上のコードの実行結果は以下の画像のようになります。(ブラウザは Chrome)

http://surferonwww.info/BlogEngine/image.axd?picture=2016%2f9%2fgridviewtextoverflow.jpg

ただし、やはりブラウザ依存のようで(text-overflow:ellipsis はもともと IE の独自拡張)、自分が試した限りでは IE9, Firefox 49.0.1, Chrome 49.0.2623.112 m, Safari 5.1.7 (7534.57.2) では OK だったものの、Opera 12.18 では三点リーダーが表示されませんでした。

【2016/10/5 12:48 追記】

私の 2016/10/05 12:09 のコメントで、

「やり方の問題」とか書いておいて、そうではなかったりすると何なので、後で検証して結果を回答欄に追記しておきます。

と書きましたように、上の【2016/10/4 12:45 追記】 のサンプルに DataTables を適用して検証してみました。

結果は以下の画像のとおりで、「三点リーダー」は表示されます。

http://surferonwww.info/BlogEngine/image.axd?picture=2016%2f9%2fgridviewanddatatables.jpg

質問者さんが試してダメだったのは、多分横方向のスクロール scrollX: true を設定したからだと思います。

scrollX: true があると columnDefs: [ ... ] で幅を設定しても無視され、文字列分の幅が確保されるので結果「三点リーダー」は表示されないということになるようです。(理由は不明。実際に試してそうなりました)

上の画像のコードは以下の通りです。コメントアウトした scrollX: true, を有効にして試すと上で私が言ったことが分かると思います。

<%@ Page Language="C#" %> <%@ Import Namespace="System.Data" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> // データソース用の DataTable を作成 protected DataTable CreateDataTable() { DataTable dt = new DataTable(); DataRow dr; dt.Columns.Add(new DataColumn("ID", typeof(Int32))); dt.Columns.Add(new DataColumn("Name", typeof(string))); dt.Columns.Add(new DataColumn("Type", typeof(string))); dt.Columns.Add(new DataColumn("Price", typeof(Int32))); dt.Columns.Add(new DataColumn("Qty", typeof(Int32))); dt.Columns.Add(new DataColumn("Amount", typeof(Int32))); dt.Columns.Add(new DataColumn("CategoryID", typeof(Int32))); dt.Columns.Add(new DataColumn("Note", typeof(string))); dt.Columns.Add(new DataColumn("Discontinued", typeof(bool))); dt.Columns.Add(new DataColumn("DateTime", typeof(DateTime))); for (int i = 0; i < 20; i++) { dr = dt.NewRow(); dr["ID"] = i; dr["Name"] = (i % 2 == 0) ? "Name_" + i.ToString() : "Long Long Name_" + i.ToString(); dr["Type"] = (i % 2 == 0) ? "Long Long Product Type " + (100 - i).ToString() : "Type " + (100 - i).ToString(); dr["Price"] = 123000 * (i + 1); dr["Qty"] = (i + 1) * 20; dr["Amount"] = 123000 * (i + 1) * (i + 1); dr["CategoryID"] = 100 - i; dr["Note"] = "Note_" + i.ToString(); dr["Discontinued"] = (i % 2 == 0) ? true : false; dr["DateTime"] = DateTime.Now.AddDays(i); dt.Rows.Add(dr); } return dt; } // GridView に上記メソッドで作った DataTable をバインド protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { GridView1.DataSource = CreateDataTable(); GridView1.DataBind(); } } // GridView に thead, tbody, tfoot 要素を追加 protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Header) { e.Row.TableSection = System.Web.UI.WebControls.TableRowSection.TableHeader; } else if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.TableSection = System.Web.UI.WebControls.TableRowSection.TableBody; } else if (e.Row.RowType == DataControlRowType.Footer) { e.Row.TableSection = System.Web.UI.WebControls.TableRowSection.TableFooter; } } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="/Scripts/jquery-1.11.1.js" type="text/javascript"></script> <script src="/datatables-1.10.12/js/jquery.dataTables.js" type="text/javascript"></script> <link href="/datatables-1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { $("#<%=GridView1.ClientID%>").DataTable({ // scrollX: true, // scrollY: 200, columnDefs: [ { targets: 0, width: 50 }, { targets: 1, width: 100 }, { targets: 2, width: 100 } ] }); }); //]]> </script> <style type="text/css"> table { width: 100%; table-layout: fixed; } table th, td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server" EnableViewState="False" OnRowCreated="GridView1_RowCreated" ShowFooter="True"> </asp:GridView> </form> </body> </html>

投稿2016/10/03 09:56

編集2016/10/05 03:47
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AKICO

2016/10/03 10:16

SurferOnWww様、迅速な回答をありがとうございます。 SurferOnWww様のページも見させていただいておりました。 おっしゃる通り、「overflow: hidden」のところで行っていることをしたいと思っています。 その前に、 http://www.jquery-bootgrid.com/Examples の、Data Exampleの表が、ブラウザの幅を縮めていくと三点リーダになっていくのを見て、もしかしたらDataTablesでもできるのかと思った次第です。
退会済みユーザー

退会済みユーザー

2016/10/03 11:33

紹介いただいた URL の jQuery Bootgrid のページを、Chrome のディベロッパーツールを使って当該部分を見てみましたが、overflow: hidden;、white-space: nowrap;、text-overflow: ellipsis; というスタイルが適用されています。以下の画像を見てください。 http://surferonwww.info/BlogEngine/image.axd?picture=2016%2f9%2fgridviewoverflow.jpg 「DataTablesでもできるのか」は DataTables が jQuery Bootgrid と同様なスタイルを適用しているかによると思います。 でも、実際にやってみてダメだったのでは? もしダメだったのであれば、DataTables は「三点リーダー」にするようなスタイルは適用してないということだと思います。 #一つ自分としての疑問は、td 要素はブロックレベル要素ではないのでそれに直接 overflow は適用できないと思っていたのですが、それについては明日検証してみます。
AKICO

2016/10/03 13:14

SurferOnWww様、ご確認ありがとうございます。 Chrome のデベロッパーツール、このように使うのですね、知りませんでした。。 >「DataTablesでもできるのか」は DataTables が jQuery Bootgrid と同様なスタイルを適用しているかによると思います。 >実際にやってみてダメだったのでは? 単純に、GridViewにDataTablesを実装させてみて、ダメだったんですけど、 SurferOnWww様が調べてくださった、tdにoverflow: hidden;、white-space: nowrap;、text-overflow: ellipsis; が設定されているということをヒントに、もう一度試してみます。
AKICO

2016/10/03 13:37

tdに、ただ td{ overflow :hidden; text-overflow:ellipsis; white-space :nowrap; color : rgb(255,0,0); } としてもダメだということは分かったので、また別の観点で試してみます。
退会済みユーザー

退会済みユーザー

2016/10/04 03:08

先の私のコメントで「td 要素はブロックレベル要素ではないのでそれに直接 overflow は適用できないと思っていたのですが・・・」と書きましたが、それは親の table 要素に table-layout: fixed; というスタイルが適用されていたからでした。 あとで、回答欄に GridView ではどのようにできるかという例を書いておきます。
AKICO

2016/10/04 09:00

SurferOnWww様、ご回答ありがとうございます。 また、2016/10/4 12:45 追記 の記載をありがとうございました。 こちらを実行し、DataTablesやwidth指定などを全く適用させない、GridView単体での三点リーダについて、できることを確認いたしました。 これに、DataTablesを適用させようとし、その際のDataTablesでの実装でwidth指定をしたいのですが反映されず、また三点リーダもなくなってしまいました。 またいろいろと試してみたいと思います。
退会済みユーザー

退会済みユーザー

2016/10/04 09:32

DataTables というのは自分は全く知らないのですが、もともと「三点リーダー」にするようなスタイルは設定されてないのですよね? であれば質問者さんが自力でスタイルを設定しなければならないはずですが、どのようにしたのでしょう? 結果をディベロッパーツールで見て「三点リーダー」にするスタイルが設定されることを確認しましたか? あとライブラリによっては table 要素をを全く別物に変えてしまうものもあります。たとえば、Grid.js(詳しくは以下の URL の記事参照)。これは table 要素を div 要素に変えてしまうので、table 要素に適用するスタイルを書いても何ともなりません。 http://surferonwww.info/BlogEngine/post/2013/02/04/freezing-header-and-column-of-gridview-by-using-javascript-gridjs.aspx
退会済みユーザー

退会済みユーザー

2016/10/05 03:09

DataTables のサイトに行ってサンプルを見てみましたが、上のコメントに書いたような「table 要素を全く別物に変えてしまう」と言うことはなくて、table 要素のままでした。 「三点リーダー」にするようなスタイルは設定されていません。なので、追加で上の回答欄に書いたようなスタイルを設定すればいいはずです。 質問者さんが試してうまく行かないのはやり方の問題かと思います。 DataTables のサイトの Installation のページでは table 内に thead, tbody 要素が書いてありましたが対応しましたか? GridView では何もしなけれれば thead, tbody 要素は出てきませんが? #「やり方の問題」とか書いておいて、そうではなかったりすると何なので、後で検証して結果を回答欄に追記しておきます。
AKICO

2016/10/11 03:36

SurferOnWww様、ご回答本当にありがとうございました! そしてこちらの回答が大変遅くなってしまい、大変申し訳ございませんでした。 「三点リーダ」につきまして、 おっしゃる通り、scrollX: true が設定されているとダメで、これをコメントアウトすると、三点リーダが表示されました。 とても横長の表になるため、何とか三点リーダと横スクロールの同時設定ができないか、と、DataTablesのプラグイン(「FixedColumns」「Scroller」)も調査してみましたが、scrollX: trueだとどうしても三点リーダーが無効になってしまいました。 仕様の見直しも含めて再検討したいと思います。 三点リーダーの設定につきましては、SurferOnWww様のご回答で解決いたしましたので、ベストアンサーとさせていただきたいと思います。 本当に、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問