ボタン押下等のトリガで、既に表示されているTABLEのセル(TDエレメントね)を
動的にcolspanで結合させたいのですが、方法が分かりません。
ブラウザはIEオンリーなのでDHTMLでもなんでもOKです。

ご存知の方、どうぞよろしくおねがいします。

A 回答 (1件)

できません。

(自信90%)
例えば、「結合する前のテーブル」と「セルを結合した後のテーブル」をそれぞれ、あらかじめ<DIV>で囲んで用意し、後者をvisibility="hidden"にしておく。
JavaScript:Onclickで前者、後者をスワップする。
という方法で出来なくはないです。苦肉です。
    • good
    • 0
この回答へのお礼

さっそくの御回答、ありがとうございました。
そうですか、できませんか・・・
画像を一切使わず、動的に棒グラフを書きたいのでこの質問をさせていただきました。
棒グラフ上に文字も載せるため、セルの結合がしたかったのですよ。
上記要件を満たす棒グラフってどうやったら描けるのでしょうか。
ご存知の方、どうぞよろしくおねがいします。

スレッド、変えなきゃいけないかなぁ・・・

お礼日時:2001/04/13 16:19

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qtdの中のtableの中のtd

.box{~~}
という具合にfont-sizeやline-heightを
スタイルシートで定義しています。

あるtdの中に<td class="box">で
そのスタイルを適用させるまではいいのですが、
そのtdの中にさらにtableを作った場合、
その中にはboxスタイルが適用されません。

入れ子になっている影響かな?とは思うのですが、
この場合、どう指定したらよいのでしょうか。
すべてのtdにclass指定するのは避けたいです。

Aベストアンサー

#1の方の回答にある、テーブルに直接クラス指定する方法の他に、boxクラスに含まれる要素に対する特定の要素にも指定を追加するセレクタを記述する方法も使えると思います。

.box{~~}

これを

.box, .box td{~~}

とすると、boxクラスの要素の中に含まれているtd要素にも同じスタイルシートを適用するようになると思います。

他に、DOCTYPEスイッチを使って、ブラウザでのスタイルシートの適用方法を変えることでも対処できるかもしれません。 この場合は、HTMLファイルの<HTML>タグの前に、省略なしで下記のDOCTYPE宣言を記述します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

こうすると、スタイルシートの適用範囲が標準モードになり、特に細工をしないでもboxクラスの要素内のテーブルにもboxのスタイルが適用されると思います。
ただ、こちらの方法を使うと、全体的にスタイルシートの適用方法が変わるので、他の調整も必要になるかもしれません。

参考まで。

#1の方の回答にある、テーブルに直接クラス指定する方法の他に、boxクラスに含まれる要素に対する特定の要素にも指定を追加するセレクタを記述する方法も使えると思います。

.box{~~}

これを

.box, .box td{~~}

とすると、boxクラスの要素の中に含まれているtd要素にも同じスタイルシートを適用するようになると思います。

他に、DOCTYPEスイッチを使って、ブラウザでのスタイルシートの適用方法を変えることでも対処できるかもしれません。 この場合は、HTMLファイルの<HTML>タグの前に、省略...続きを読む

Q[table] colspanについて

画像添付にあるようなセル区切りのtableをhtmlで作成したいと考えています。

4列目にセルが4つあるので、3列目のcolspanの指定をどのように記述すればいいのか
不明で困っています。

----------------------------------------------------
<table>
<tr>
<th></th>
<th colspan="3"></th>
</tr>
<tr>
<td></td>
<td colspan="3"></td>
</tr>
▼▼▼▼▼この列のrowspanの指定がわからない▼▼▼▼▼
<tr>
<td></td>
<td></td>
<td></td>
</tr>
▲▲▲▲▲この列のrowspanの指定がわからない▲▲▲▲▲
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="3"></td>
</tr>
</table>
----------------------------------------------------

どなたか解決案をご存知の方、お教えいただけないでしょうか?

colspanにこだわっているわけではないので、cssで解決できるのであればcssでも大丈夫です。
よろしくお願い致します。

画像添付にあるようなセル区切りのtableをhtmlで作成したいと考えています。

4列目にセルが4つあるので、3列目のcolspanの指定をどのように記述すればいいのか
不明で困っています。

----------------------------------------------------
<table>
<tr>
<th></th>
<th colspan="3"></th>
</tr>
<tr>
<td></td>
<td colspan="3"></td>
</tr>
▼▼▼▼▼この列のrowspanの指定がわからない▼▼▼▼▼
<tr>
<td></td>
<td></td>
<td></td>
</tr>
▲▲▲▲▲この列のrowspanの指定がわからない▲▲▲▲▲
<tr>
<td></td>
<td></td>
<td...続きを読む

Aベストアンサー

<table>
<tr>
<th></th>
<th colspan="6"></th>
</tr>
<tr>
<td></td>
<td colspan="6"></td>
</tr>
<tr>
<td></td>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="6"></td>
</tr>
</table>

……ところで、なぜこのような表を作る必要が出てきたのでしょうか?

Qの colspanについて

<table border=1>
<tr><td colspan=2>aaaaaaaaaaaaaaaaa</td></tr>
<tr><td colspan=2>aaaaaaaaaaaaaaaaaa</td></tr>
<tr><td>aa</td><td>bb</td></tr>
<tr><td colspan=2>aaaaaaaaaaaaaaaaaaaaaaaa</td></tr>
</table>

の3行目の(分割している)2つのセルの幅を自由に設定したいのですが、width=10%などといれてもうんともすんともしません。なにかいい方法ありますか?

Aベストアンサー

できますよ。以下の様に試してみたらできました。
<html>
<head>
</head>
<body>
<table border=1>
<tr><td colspan=2>aaaaaaaaaaaaaaaaa</td></tr>
<tr><td colspan=2>aaaaaaaaaaaaaaaaaa</td></tr>
<tr><td width = "10%">aa</td><td>bb</td></tr>
<tr><tdcolspan=2>aaaaaaaaaaaaaaaaaaaaaaaa</td></tr>
</table>
</body>
</html>

QIE6 バグ table td colspan paddingの組み合わせ

Internet Explorer6ではテーブルにCOLSPANが指定されたセルが含まれるとcolspanを含まないセルの幅の指定がずれるというバグがあるようです。

特にこのバグは、テーブルの一段目の行の全てのセルがcolspanで結合され一つのセルになっている場合、顕著に現われるようです。

このバグは、テーブルに含まれる全てのセルにwidthを指定することである程度防げるようですが、全てのセルにwidthを指定しても、一段目のcolspanのあるセルの左右にcssでpaddingを指定しているとそのテーブルのcolspanを含まないセル(一段目以降のセル)の幅がずれてしまいます。

このバグをどのようにして回避するか、ご存知の方はおられますか?
よろしくお願いします。

キャサリン

Aベストアンサー

こんにちわ。

>一段目のcolspanのあるセルの左右にcssでpaddingを指定していると・・・

IEのpadding解釈はおかしいです。
出来るだけ、IEでpaddingは使わない方がいいかもしれません。

さて、上記のことですが Colspanセル に padding を適用するということは、中身の左右や上下に空間を作りたいということですよね?
それも、<table>全体のセルではなくそのセルだけに。

こういう方法はどうでしょうか?
<tr>
<td colspan="2" width=200px>
<div style="width:180px;maegin:10px;">中身</div>
<td>
</tr>
<tr>
<td width=100px></td>
<td width=100px></td>
</tr>

つまりColspanの中身を<div>タグでくくり、そのDIVの外側の余白として margin で余白を指定するというやり方です。
モチロン、Colspanのセル幅に対して余白分を考えた<DIV>の横幅に設定してくださいね。

こんにちわ。

>一段目のcolspanのあるセルの左右にcssでpaddingを指定していると・・・

IEのpadding解釈はおかしいです。
出来るだけ、IEでpaddingは使わない方がいいかもしれません。

さて、上記のことですが Colspanセル に padding を適用するということは、中身の左右や上下に空間を作りたいということですよね?
それも、<table>全体のセルではなくそのセルだけに。

こういう方法はどうでしょうか?
<tr>
<td colspan="2" width=200px>
<div style="width:180px;maegin:10px;">中身</...続きを読む

Qtableにtable。table同士の間隔を拡大

スクロールバーを付けるためにtable内にtableを入れました。
中のtableとtableの間隔を開けたいです。
言葉が少ないですが、その分画像で頑張って説明します。
お願いいたします。
<style type="text/css">
#test0{
cellpadding: 2;
width: 518px;
background-color : #fff;
border:1px solid #333;
border-spacing:0;
}

#start{
width: 495px;
height: 230;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

.center{
width: 495px;
height: 230;
border-top: 0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

#end{
width: 495px;
height: 230;
border-top: 0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #40ee22;
}

td.test1{
background-color: #000000;
color: #333333;
}

td.test2 img{
margin: 10px;
}

.test3{
font-size: 12px;
padding: 5px;
}

td.test4{
text-align: center;
}
</style>
<table id="test0">
<tbody>
<tr>
<td>
<DIV style="height:400px; overflow:auto;">

<table id="start">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>

<table class="center">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>

<table id="end">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

スクロールバーを付けるためにtable内にtableを入れました。
中のtableとtableの間隔を開けたいです。
言葉が少ないですが、その分画像で頑張って説明します。
お願いいたします。
<style type="text/css">
#test0{
cellpadding: 2;
width: 518px;
background-color : #fff;
border:1px solid #333;
border-spacing:0;
}

#start{
width: 495px;
height: 230;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

.center{
width: 495px;
...続きを読む

Aベストアンサー

<h1>サンプル</h1>
<div class="product">
<div class="section"><!-- HTML5ではsectionという要素になる -->
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
</div>
</body>
</html>

<h1>サンプル</h1>
<div class="product">
<div class="section"><!-- HTML5ではsectionという要素になる -->
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li c...続きを読む


人気Q&Aランキング

おすすめ情報