- 締切済み
colspanを動的に行う
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- zooom
- ベストアンサー率37% (43/115)
できません。（自信９０％） 例えば、「結合する前のテーブル」と「セルを結合した後のテーブル」をそれぞれ、あらかじめ<DIV>で囲んで用意し、後者をvisibility="hidden"にしておく。 JavaScript:Onclickで前者、後者をスワップする。 という方法で出来なくはないです。苦肉です。
関連するQ&A
- tableでcolspanを使うと次行以下のセルの幅が均等に？
tableでcolspanを使うと、colspanで結合した行の次行以下のセルの幅が均等になってしまいます。 どうすれば、colspanで結合した行の次行以下のセルの幅が均等になるのを防げるでしょうか?IE6,IE7 意図的にスタイルシートは、使用しないでください。 例： <table width="300" border="1" cellspacing="1" cellpadding="5"> <tr> <td colspan="2" width="284" align="center"> タイトルセル </td> </tr> <tr align="left" valign="top"> <td width="100"> セル左 <td> <td width="171"> セル右 <td> </tr> <table> 上記の場合、本来ならば、左のセルの幅（100px）が右のセルの幅(171px)より狭いはずなのに、左のセルの幅と右のセルの幅が均等になっていしまいます。 下記コード部分を上記のコードから削除すると、本来の比率で左のセルと右のセルの幅が表示されます。 <tr> <td colspan="2" width="284" align="center"> タイトルセル </td> </tr> よろしくお願いします。
- ベストアンサー
- HTML
- colspanを使うと正しく表示できない？！
あるwebシステムで 現在の予約数を表示するようなhtmlを作成しています。 tableを使って、td内に予約できる数をcolspanで指定して、 現在の予約状況がひとめでわかるように表示しているのですが なぜか、正しく表示できなくなってしまいました。 ブラウザもie6からie8にはなったのですが。 いろいろ検索してみると、似たような質問はたくさんされていましたし、 それぞれにwidth指定もすればよい・・・のように記載されていて解決されているようでした。 でも、同じように試してみましたがダメでした。（表示結果は同じ） サンプルとしまして、（全体で92がMAXの予約数として です） <table width="319" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="100" height="25" colspan="2" align="center">日時</td> <td width="100" colspan="50" align=right>50</td> <td width="84" colspan="42" align=right>92</td> <td width="35" height="25" align="center" bgcolor="#ffd37d">空き</td> </tr> <tr> <td rowspan="12" width="55" align=center valign=top>11月26日</td> <td width="45" align=center>0時</td> <td width="110" colspan="55" bgcolor="#ff4500" align="center">55</td> <td width="74" colspan="37" bgcolor=white><br></td> <td width="35" align=center><font color=navy>37</font></td> </tr> <tr> <td width="45" align=center>1時</td> <td colspan="55" bgcolor="#ff4500"align="center">55</td> <td colspan="37" bgcolor=white><br></td> <td width="35" align=center><font color=navy>37</font></td> </tr> <tr> <td width="45" align=center>2時</td> <td colspan="55" bgcolor="#ff4500" align="center">55</td> <td colspan="37" bgcolor=white><br></td> <td width="35" align=center><font color=navy>37</font></td> </tr> <tr> <td width="45" align=center>3時</td> <td colspan="70" bgcolor="#ff4500" align="center">70</td> <td colspan="22" bgcolor=white><br></td> <td width="35" align=center><font color=navy>22</font></td> </tr> ・ ・ ・ のような場合、<tr>内の2つめの<td>のcolspan=70も55も同じ幅で表示されます。 違う・・・といえば、align=centerでそれぞれ数字を表示させていますが 55のテキストが少し左寄り、70がcenterに表示されてるように見えます。 また、赤背景色の幅も微妙に0.xミリくらいは colspan=70の方が広いです。 tableのwidthがborderの幅を考慮していないのですが これも問題でしょうか？ みなさん、似たような問題がでても解決されているようなのですが 自分の場合、どうやってもなかなか解決できません。 tableの幅を広めに取ったり、style指定したり、widthを入れたり・・・ 因みに依然（今年の春頃まで？）は、width無しのcolspan指定だけで、 思い通りに表示できていました。 その後、ブラウザのバージョンアップがありました。 最初（春頃）はstyleで table{ table-layout:fixed; } を指定したらなんとかうまく表示できました。 今回は春頃のバージョンのままで特に変更なく動かせるはずだったのですが。。。 そのままではダメなようです。 どのような方法があるのかアドバイスいただければと思います。 よろしくお願いします。
- ベストアンサー
- CSS
- [table] colspanについて
画像添付にあるようなセル区切りのtableをhtmlで作成したいと考えています。 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でも大丈夫です。 よろしくお願い致します。
- ベストアンサー
- HTML
- テーブル結合 縦横両方するには？
テーブルの縦の結合は rowspan テーブルの横の結合は colspan これを使って表を結合しました １つのセルに両方入れると正常な表になりません <td rowspan="3" colspan="3"> </td> というふうに書いたのですが表が新たに変なセルが増えてしまいます 解決方法わかる方おしえてください あとrowspan="3"と書いたら縦の下２つのセルのプログラム文は 消しています、これは問題あるでしょうか？ colspanも同じやり方です
- ベストアンサー
- HTML
- colspan セルの結合について
テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが 縦線が消えてしまいます。何故なのか調べてもわからず困っています。 ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>
- 締切済み
- HTML
- IE6 バグ table td colspan paddingの組み合わせ
Internet Explorer6ではテーブルにCOLSPANが指定されたセルが含まれるとcolspanを含まないセルの幅の指定がずれるというバグがあるようです。 特にこのバグは、テーブルの一段目の行の全てのセルがcolspanで結合され一つのセルになっている場合、顕著に現われるようです。 このバグは、テーブルに含まれる全てのセルにwidthを指定することである程度防げるようですが、全てのセルにwidthを指定しても、一段目のcolspanのあるセルの左右にcssでpaddingを指定しているとそのテーブルのcolspanを含まないセル（一段目以降のセル）の幅がずれてしまいます。 このバグをどのようにして回避するか、ご存知の方はおられますか？ よろしくお願いします。 キャサリン
- ベストアンサー
- HTML
- PHP smarty で セルの結合方法
PHP の Smarty で html_table 関数を使ってテーブルを出力しているのですが、セルの結合方法が分かりません。 td_attr 属性に colspan を設定してやる感じになると思うのですが、、 例えば、複数行2列のテーブルがあって、1行目だけ colspan=2 みたいな・・・。 「smarty セル 結合」でググってもそれらしいのがヒットしませんでした。。 宜しくお願いしますm(__)m
- ベストアンサー
- PHP
- 【IE6】テーブルにcolspanが入ると幅指定がずれる？
閲覧いただきありがとうございます。 <Html>にて、<table>を入れているのですが <colspan>すると幅指定がずれてしまいます。 タグ記述のミスなのか、仕様なのかはっきりと分からない為 質問させていただきます。 下記のようなテーブルを作っています。 【テーブル】 テーブル幅 500px 2行 5列：（各列100pxの5等分） 【列内容】 1行目 ├5列全て colspan 2行目 ├1列目：100px ├2-3列目：100+100＝200px (colspan=2) ├4-5列目：100+100＝200px (colspan=2) ここで、2-3列目に幅200pxに指定した <select>タグを入れると、意図しない幅になってしまいます。 意図している動きは 2-3列目の幅ぴったりに<select>が入ってほしいのですが 4-5列目の4列部分がえぐれてしまい、4-5列目が200pxではなく 100pxぐらいの描画になってしまいます。 そして<select>タグは2-3列目にぴったりと入らず、 後ろに100pxの空きがでてしまいます。 http://kikky.net/pc/css_bug020.html このサイトではIE6ではcolspanがあると幅指定がずれると なっていますが、同一の現象なのでしょうか？ 示唆いただければ幸いです。 宜しくお願いします。 --------------記述html--------------- <html> <head> <title> ColSpanテスト </title> </head> <body> <table width="500" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" style="border-collapse: collapse;" > <colgroup> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> </colgroup> <!-- １行目 --> <tr> <td colspan="5"> span5 </td> </tr> <!-- ２行目 --> <tr> <!-- １列目 --> <td> </td> <!-- ２-３列目 --> <td nowrap colspan="2" > <select style="width:200px;" size="1" name="sl" id="sl"> <option value="99999">２列にしたい</option> </select> </td> <!-- ４-５列目 --> <td colspan="2" > 200pxなのに・・・ </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- colspan を使用した際のIE7の動作
行き詰ってしまったのでこちらで質問させていただきます。 テーブルで表を作成しているのですが、 colspanで指定したセルの中にinputを入れると急にIE7でレイアウトが崩れます。 IEの他のverでは大丈夫なのですが、7だけくずれてしまうのは何か回避策があるのでしょうか？ ちなみに、下記のようなソースです。 全体で8列とり、１行目は項目３つに対してそれぞれinputを入れる列があり、 2行目は項目２つでinputを入れる列があります。 1行目は3等分にしたく、2行目は2等分にしたい形です。 何かほかに方法があるのでしょうか？ ご教授いただければと思います。 <style type="text/css"> .test{border-collapse:collapse;} .test td,.test th{border:solid 1px #000;} </style> <table width="952" border="1" cellspacing="0" cellpadding="0" class="test"> <tr> <th width="80">項目1</th> <td width="235"><input name="" type="text" value="12345" /></td> <th width="80">項目2</th> <td colspan="3"><input name="" type="text" value="12345" /></td> <th width="80">項目3</th> <td width="235"><input name="" type="text" value="12345" /></td> </tr> <tr> <th>項目4</th> <td colspan="3"><input name="input2" type="text" value="12345" /></td> <th width="80">項目5</th> <td colspan="3"><input name="input3" type="text" value="12345" /></td> </tr> </table>
- ベストアンサー
- HTML
- セル結合時のcols指定について
tableタグでcols（列数）を指定すると表示が若干早くなる、ということを聞いたので、実践してみたいのですが、不規則なセルの結合をしている場合、列数の指定は、どこに揃えれば良いのでしょうか？ 例) <table cols="?"> <tr> <td colspan="6">左</td> <td>右</td> </tr> <tr> <td colspan="3">左1/2</td> <td colspan="3">左2/2</td> <td>右</td> </tr> <tr> <td colspan="2">左1/3</td> <td colspan="2">左2/3</td> <td colspan="2">左3/3</td> <td>右</td> </tr> </table> 左の列には、上からそれぞれ1,2,3個分のセルを収め、右の列は１個のセルを収める。 例えばこんな形式の表を作ったとして、実質的な列数は上から、2,3,4つになりますが、左右をきっちり分ける為に、colsは7つ分使っています。 この場合だと、colsの合計値である「7」に合わせるのが適切なのでしょうか？ それとも見た目の列数の最大値「4」に合わせるべきなのでしょうか。 表示速度の効果自体は大したものではないかもしれませんが、 ちょっと気になったので質問します。
- ベストアンサー
- HTML
お礼
さっそくの御回答、ありがとうございました。 そうですか、できませんか・・・ 画像を一切使わず、動的に棒グラフを書きたいのでこの質問をさせていただきました。 棒グラフ上に文字も載せるため、セルの結合がしたかったのですよ。 上記要件を満たす棒グラフってどうやったら描けるのでしょうか。 ご存知の方、どうぞよろしくおねがいします。 スレッド、変えなきゃいけないかなぁ・・・