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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

受付中

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

AKICO
AKICO

総合スコア0

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

24607閲覧

投稿2016/10/18 05:26

###前提・実現したいこと
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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。