- PR -

GridViewで列幅を固定にする方法

1|2 次のページへ»
投稿者投稿内容
カタナ
大ベテラン
会議室デビュー日: 2006/05/25
投稿数: 110
投稿日時: 2008-02-18 14:36
いつもお世話になります。
現在ASP.NET2.0(VB)を使用して開発を行っています。

あるマスタの登録画面に備考欄という1000文字以内入力可能なMultiLineのテキストボックスがあります。
そこに入力した備考をGridViewで表示するのですが、備考欄に改行コードなしで長文を入力した場合にGridViewの幅も大変広くなってしまいます。
列幅を固定したくて、次のことは試したのですが、列幅は固定化しません。

  • GridViewのwidthを指定しても駄目でした。
  • GridViewのItemStyleのwidthを指定しても駄目でした。
  • IEだけでなくFireFoxやOperaにも対応したいので、cssのword-breakプロパティは使用できません。

列幅を固定にする方法を教えてください。よろしくお願い致します。

GENZO
大ベテラン
会議室デビュー日: 2003/11/26
投稿数: 111
お住まい・勤務地: 名古屋
投稿日時: 2008-02-18 15:14
cssになりますが、table-layout: fixedでいかがでしょうか？
rain
ぬし
会議室デビュー日: 2006/10/19
投稿数: 549
投稿日時: 2008-02-18 15:27
直接の回答ではありません。

その最大1000文字が入るかもしれない備考欄というのは、
本当にGridViewで表示しないといけないのでしょうか。

・表示しない（選択した後の詳細画面などで表示する）
・最初の何文字かだけ表示する（Webだとどうやってやるんだろう）

というふうには変えられないものでしょうか。
カタナ
大ベテラン
会議室デビュー日: 2006/05/25
投稿数: 110
投稿日時: 2008-02-18 19:26
GENZOさん、rainさん返信ありがとうございます。
GENZOさんの言われるようにfixedで試してみたのですが、IEではうまくいきますが、FireFoxではうまく表示されません。
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<title>無題ドキュメント</title>
</head>
<body>
<table border="1" width="500" style="table-layout: fixed;">
<tr>
<th bgcolor="#EE0000" width="140"><font color="#FFFFFF">タイトル</font></th>
<th bgcolor="#EE0000" width="180"><font color="#FFFFFF">備考</font></th>
</tr>
<tr>
<td bgcolor="#99CC00">タイトル１</td>
<td bgcolor="#FFFFFF">aiueoかきくけこｓｊｆｌｋｄｓｌｆｊｌｋｓｄｊｆｌｊｓさしすせそたちつてとなにぬねのaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaあいうえお</td>
</tr>
<tr>
<td bgcolor="#99CC00">タイトル２</td>
<td bgcolor="#FFFFFF">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaあいうえおbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbさしすせそたちつてと</td>
</tr>

<tr>
<td bgcolor="#99CC00">タイトル３</td>
<td bgcolor="#FFFFFF">プッタネスカとは娼婦風という意味</td>
</tr>
</table>
</body>
</html>

rainさんの言われるように仕様を変更するしかないのでしょうか？
備考欄を表示したいというのは顧客の意向でして、できればその思いに答えたいのですが・・・。

よっし〜。
ベテラン
会議室デビュー日: 2007/04/17
投稿数: 89
お住まい・勤務地: 北のほうの国
投稿日時: 2008-02-18 20:32
表示時に１行に表示可能な文字数をカウントして
<br>で区切るとか
べる
ぬし
会議室デビュー日: 2003/09/20
投稿数: 1093
投稿日時: 2008-02-18 22:08
引用:
<tr>
<td bgcolor="#99CC00">タイトル２</td>
<td bgcolor="#FFFFFF">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaあいうえおbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbさしすせそたちつてと</td>
</tr>
途中で切りたいんですか。だったら

コード:

<tr>
<td bgcolor="#99CC00">タイトル２</td>
<td bgcolor="#FFFFFF"><div style="width:180px;overflow:hidden;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaあいうえおbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbさしすせそたちつてと</div></td>
</tr>
とか。tableとtdのwidthをあわせないと変になりますが。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-02-19 01:11
GridViewを横スクロールさせる、ってのは無し？
ヘッダとコンテンツが同時にスクロールしつつ、

表示がちと重くなるけど出来ないことは無い。

table-layout:fixed やったら、
<colgroup> も追加。各カラムの幅を指定してあげる。

GridView全体を、
<div id="outerDiv">
<div id="headerDiv"></div>
<div id="contentDiv" style="width:640px;height:400px;overflow:scroll;">
//ここにGridView を記述します。
</div>
</div>
とかやってあげると、幅を超える部分はスクロール領域に
隠れます。で、ここからが面倒なんですけどね(-:
ヘッダを外だしにして、コンテンツの横スクロールに追従するように
してあげる。

縦横スクロール対応させるのはかなり骨折れるけど出来ないことも
無いです。

ヘッダの外だしはCSSだけで出来ますが、横スクロールとヘッダ・コンテンツ
の同期スクロール処理にはScriptを使います。

またスクリプト使ってOKなら、指定幅一杯に収まるように、適当な位置に
改行を挿入するScriptはこんな感じです。１文字ずつやると遅くなるので
しきい値を用意してある程度の文字数を一括で処理し、微調整に１文字単
位で調整した方が効率よいですね。
<script>
function autoBr(text, width) {
var sp = document.createElement("span");
sp.style.visibility = "hidden";
document.body.appendChild(sp);
var arr = [];
for (var i=0;i < text.length;i++) {
var ch = text.charAt(i);
sp.innerText += ch;
if (sp.offsetWidth > width-10) {
arr.push(sp.innerText);
}
}
document.body.removeChild(sp);
return "<pre>" + arr.join("\n") + "</pre>";
}
</script>

参考になりますでしょうか？


[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-02-19 01:26 ]
rain
ぬし
会議室デビュー日: 2006/10/19
投稿数: 549
投稿日時: 2008-02-19 09:33
ＧｒｉｄＶｉｅｗで列の幅を変わらないようにする
こちらにもありますが、列幅を固定にするというのはそう単純なお話ではないので、
どこは譲れるか？ どこは譲れないかによって、ベターな解決方法は変わってきます。
# ベスト(=100%)な解決方法は期待しないほうがよいと思います。
# 目指すのはよいのですが、労力にあうかどうか…

「GridView セル 幅 固定」でググるといろいろ出てきますので、
その中でカタナさんの要件にあった方法を見つけていただくのがよいと思います。
1|2 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）