• ベストアンサー

スタイルシートで colspan=3と定義することは可能でしょうか?

<style> x { } </style> <table> <tr> <td colspan=3 class="x">タイトル</td> </tr> <tr> <td>1</td><td>2</td><td>3</td> </tr> </table> また、有名なブラウザで対応している最新のCSSバージョンは何でしょうか? よろしくお願いいたします。

  • HTML
  • 回答数1
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

できないと思います。 colspan は、セルを連結する指定ですが、 もともと <td></td><td></td><td></td> であったものが <td colspan=3></td> のように連結するには、他の"<td></td><td></td>"を削除する必要があります。 それは、スタイルだけの話ではなくてセルの実体を操作する必要があるということですから。

関連するQ&A

  • [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でも大丈夫です。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • スタイルシートをhead内で定義したい

    下のテーブルのようにしたいんですが、上のテーブルはすきまができています。 このすきまをなくすために、<STYLE>の中を修正してください。 <TABLE>内は変更せずに<STYLE>だけでできるはずです。 <HTML> <HEAD> <STYLE> table.ccc{border:solid;border-color:#bbbbcc} td.ccc{border:solid;border-color:#bbccbb} .ccc th{border:solid;border-color:#ccbbbb} </STYLE> </HEAD> <BODY> <TABLE class="ccc"> <TR class="ccc"> <TH>名前</TH> <TH>住所</TH> </TR> <TR class="ccc"> <TD class="ccc">太郎</TD> <TD class="ccc">東京都新宿区</TD> </TR> <TR class="ccc"> <TD class="ccc">花子</TD> <TD class="ccc">沖縄県那覇市</TD> </TR> </TABLE> <br> <TABLE cellspacing=0 style="border:solid 4px #ddddee"> <TR> <TH style="border:solid 4px #eedddd">名前</TH> <TH style="border:solid 4px #eedddd">住所</TH> </TR> <TR> <TD style="border:solid 4px #ddeedd">太郎</TD> <TD style="border:solid 4px #ddeedd">東京都新宿区</TD> </TR> <TR> <TD style="border:solid 4px #ddeedd">花子</TD> <TD style="border:solid 4px #ddeedd">沖縄県那覇市</TD> </TR> </TABLE> </BODY> </HTML>

  • これをスタイルシートでするには

    以下のことをスタイルシート(CSS+<li>などを使って)でするにはどうしたらいいのでしょうか? <table border="0" width="150"> <tr> <td>なんでだろう~</td> </tr> <tr> <td>CSS is cool</td> </tr> </table> よろしくお願いします。

    • ベストアンサー
    • CSS
  • <table>の 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%などといれてもうんともすんともしません。なにかいい方法ありますか?

    • ベストアンサー
    • 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>

  • スクロール付きのテーブルで、内側に線を付ける方法

    添付画像のようにテーブル内に枠を周りに付けて二重の枠にして、 内側のテーブルとテーブルの間に破線をいれたいです。 しかし、CSSで設定しても破線も枠も表示されません。 こういう場合はどうすればいいのでしょうか? <table id="j"> <tbody> <tr> <td> <DIV style="height:300px; overflow:auto;"> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> </div> </td> </tr> </tbody> </table> -----css------ #j{ cellpadding: 2; width: 520; background-color : #ffe3c8; border:1px solid #333; border-spacing:0; } } .t{ width: 500; height: 100; border:1px solid #333; } td{ cellspacing: 0; border-collapse: collapse; border-spacing:0; }

    • ベストアンサー
    • 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
  • スタイルシートの書き方

    HPの中に以下のようなテーブルを並べて作っているのですが、後からまとめて編集しやすいようにCSSファイルを別に作ろうと思います。 自分であれこれ試してはいるのですが、スマートな(?)スタイルシートの書き方がいまいちわかりません。 どのように指定すればいいでしょうか? 因みに下のタグもかなり自己流な部分があるのではないかと思うので、おかしいところがあれば指摘してください。 よろしくお願いします。 ------------------------------------------------------ <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="1" cellpadding="2" width="500"> <tr><td bgcolor="#ffffff" width="150">AAA</td><td>BBB</td></tr> </table> </td> </tr> </table>

    • ベストアンサー
    • CSS
  • スタイルシートでのデザイン

    HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。

    • ベストアンサー
    • CSS
  • テーブルの中の文字もスタイルシートで設定するには

    <html> <head> <title>test</title> <STYLE TYPE="text/css"> <!-- h1 { font-size:50%;color:green; } '--> </STYLE> </head> <body> <h1> あああ <br> <table border=1> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> </h1> </body> </html> これだとブラウザで見た時にテーブルの外の文字しか適用されていませんが テーブルの中まで範囲は及ばないのでしょうか? テーブルの中はテーブルの中専用のタグを作らないとダメでしょうか? テーブルの外の文字と全く同じにしたいので一気に指定したいです。

    • ベストアンサー
    • HTML

専門家に質問してみよう