出産前後の痔にはご注意!

CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか?

例えば、HTMLで一行に3列になるよう以下の様に記述した時に

<table>
<tr>
<td>
<p>テキスト左</p>
</td>
<td>
<p>テキスト中</p>
</td>
<td>
<p>テキスト右</p>
</td>
</tr>
</table>

CSSでのそうさのみによって
見栄え的に縦3行、横1列に見えるようにできますでしょうか?
幅などをピクセル制限したりするのでも構いません。

もしHTMLで実現するとするならば
<table>
<tr>
<td>
<p>テキスト左</p>
</td>
</tr>
<tr>
<td>
<p>テキスト中</p>
</td>
</tr>
<tr>
<td>
<p>テキスト右</p>
</td>
</tr>
</table>

上記のような記述になると思いますが、あくまで最初のHTMLをCSSで変更して、HTML本体は書きかえない方法です。

もし、何らかの形で実現できそうな場合がありましたらアイディアをください。
お忙しいところお手数おかけしますが、よろしくお願いいたします。

※CSS記述の変更のみ。
※特定のブラウザに依存させたくない。
※Javasprictは使用しない。

「CSSだけで<table>の<td>や<」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (6件)

う~ん。

Firefox,IE,Opera,Safariの最新ブラウザ対応となると、この方法しかなさそう。
とりあえず、2行3列について試してみた。
「CSSだけで<table>の<td>や<」の回答画像6
    • good
    • 0

>ヒントだけでも


 まだ検討中・・実用性がないので後回しなのでね。

上:tableをblock,trをinline-block、tdをblock
下:tdを隣接セレクタで区別してabsolute
「CSSだけで<table>の<td>や<」の回答画像5
    • good
    • 0

 困ってるわけじゃなさそうなので、あまりこういうのには参加しないのだけれども、個人的に興味があって試してみたけど。


 firefox.Opera,Sfariは大丈夫だけど、IEはtable要素をblock要素に変換しないため、ダメだね。相変わらず、くそIE・・・こいつのためにいつも泣かされる。
「CSSだけで<table>の<td>や<」の回答画像4
    • good
    • 0
この回答へのお礼

確かに困り度はつけすぎました。すみません。
興味を持っていただいてありがとうございます。とても素晴らしい回答だと思います。
とりあえずIEに関しては考慮しないとして、良ければCSSの記述方法を教えていただきたいと思います。もちろん事前に予測しうる範囲でチャレンジしてみたのですが、行き詰ったためご教授願えればと思います。もしくはヒントでも…。

よろしくお願いいたします。ご回答ありがとうございます。

お礼日時:2010/02/05 09:57

ご提示のサンプル限定で、無理やり…



table { border-collapse: separate;}
tr td { border:1px solid gray; position:absolute; }
tr td:first-child { top:0.2em; }
tr td:nth-child(2) { top:1.7em; }
tr td:nth-child(3) { top:3.2em; }

IEは効かないかも…(FF3.5、Opera10で確認)
既回答者様の回答の通り、実用的にはナンセンスですけど。

この回答への補足

ご返答ありがとうございます。

チャレンジングですけど、実現に向かおうとするとてもいいアイディアですね!
後で試してみます。

他にもアイディアが浮かびましたら。ご連絡ください。
よろしくお願いいたします、ありがとうございます。

補足日時:2010/02/04 13:25
    • good
    • 0
この回答へのお礼

ご返答ありがとうございます。

チャレンジングですけど、実現に向かおうとするとてもいいアイディアですね!
後で試してみます。

他にもアイディアが浮かびましたら。ご連絡ください。
よろしくお願いいたします、ありがとうございます。

お礼日時:2010/02/04 13:27

無理だと思います。


このようなレイアウト変更を想定される場合、TABLEタグじゃなく、各要素をDIVで区切るのが普通かと。
見栄えはテーブルと同じく、CSSを切り替えることで縦にも横にもできます。

この回答への補足

ご返答ありがとうございます。
おっしゃる通りです。divで組むべきです。ただ今回は既成のものを後から変更しなければならず、HTMLの書き換えができないためにこのような課題(CSSのみでの変更)が発生してしまいました。
何かそれらしく見せるだけでも構わないので、何かアイディアが浮かびましたら、ご報告くださいませ。
よろしくお願いいたします。ありがとうございました。

補足日時:2010/02/04 13:14
    • good
    • 0

経験上「ない」と思いますが、ないことは証明できないので


「わからない」というのが回答です

構造が違うので常識的にはありえませんけどね。

この回答への補足

ご明確な回答ありがとうございます。

何かそれらしく見せるだけでも構わないので、アイディアが浮かびましたら、ご報告くださいませ。
よろしくお願いいたします。ありがとうございました。

補足日時:2010/02/04 13:17
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

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

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

Q【HTML】Tableの列と行の入れ替え

テーブルの列と行を入れ替える方法はないでしょうか

ヘッダー1 ヘッダー2 ヘッダー3
データ1  データ2   データ3

上のようなものを下のように入れ替えて表示させたいのです

ヘッダー1 データ1
ヘッダー2 データ2
ヘッダー3 データ3

Aベストアンサー

今のタグがわからないのですが、、参考までに。

<table border>
<tr>
<th>ヘッダー1</th>
<td>データ1</td>
</tr>
<tr>
<th>ヘッダー2</th>
<td>データ2</td>
</tr>
<tr>
<th>ヘッダー3</th>
<td>データ3</td>
</tr>
</table>

QHTMLでテーブルを縦に並べたい!

基本的な質問でお恥ずかしいのですが、困っています。
テーブルを二つ、縦に並べたいのですが、何故か横に並んでしまいます。
どこが悪いのでしょうか?初心者ですみません…お知恵をお貸しください(T_T)。

<caption><font color="#ff0000">●</font>A
<font color="#0000ff">●</font>B</font></caption>
<table bgcolor="#80ffff" border="1"cellspacing="0" bordercolor="#0000ff" align="left">
<tr><th width="30"><font size="+5"><font color="#ff0000">●</font></th>
<th width="150">
<font size="+4"><strong><big>C</big></strong></font></th>
<td><font size="+2">D<br>E</font></td></tr>
<tr><td></td><td><div align="center">
<font size="4" color="#8080ff">
準備中</font></div></td><td></td></tr></table>
</p></div>
<p></p>
<table align="center" bgcolor="#80ffff" height="20" width="250" border="1"
cellspacing="2" cellpadding="0">
<tr><td><blink>HOME</blink></td></tr>
</table>
</body>

基本的な質問でお恥ずかしいのですが、困っています。
テーブルを二つ、縦に並べたいのですが、何故か横に並んでしまいます。
どこが悪いのでしょうか?初心者ですみません…お知恵をお貸しください(T_T)。

<caption><font color="#ff0000">●</font>A
<font color="#0000ff">●</font>B</font></caption>
<table bgcolor="#80ffff" border="1"cellspacing="0" bordercolor="#0000ff" align="left">
<tr><th width="30"><font size="+5"><font color="#ff0000">●</font></th>
<th width="150">
<font size=...続きを読む

Aベストアンサー

 
  乱暴な方法かも知れませんが、わたしなら、もう一つテーブルを造り、そのなかに、二つのテーブルを収めてしまいます(入れ子にする訳です)。つまり
 
<TABLE border="0"><TR><TD>

<table bgcolor="#80ffff" border="1"cellspacing="0" bordercolor="#0000ff" align="left">
<tr><th width="30"><font size="+5"><font color="#ff0000">●</font></th>
<th width="150">
<font size="+4"><strong><big>C</big></strong></font></th>
<td><font size="+2">D<br>E</font></td></tr>
<tr><td></td><td><div align="center">
<font size="4" color="#8080ff">
準備中</font></div></td><td></td></tr></table>

</TD></TR>

<!-- </p></div>
<p></p> -->

<TR><TD>

<table align="center" bgcolor="#80ffff" height="20" width="250" border="1"
cellspacing="2" cellpadding="0">
<tr><td><blink>HOME</blink></td></tr>
</table>

</TD></TR></TABLE>

  貴方のスクリプトはどこか変ですが、( <!-- -->で囲んだ部分は、対応するタグがなく、また無意味なので、伏せました。他にも無駄なものがあります)、それは置いておくとして、「大文字のタグ」がわたしが書き入れたタグです。これで、二つのテーブルは縦に並びます。
  なお、最初のテーブルで、align=left としてるので、二つ目のテーブルが、第一のテーブルの右に回り込むのだとも思えます。
 

 
  乱暴な方法かも知れませんが、わたしなら、もう一つテーブルを造り、そのなかに、二つのテーブルを収めてしまいます(入れ子にする訳です)。つまり
 
<TABLE border="0"><TR><TD>

<table bgcolor="#80ffff" border="1"cellspacing="0" bordercolor="#0000ff" align="left">
<tr><th width="30"><font size="+5"><font color="#ff0000">●</font></th>
<th width="150">
<font size="+4"><strong><big>C</big></strong></font></th>
<td><font size="+2">D<br>E</font></td></tr>
<tr><td>...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qtable 幅固定で、端までいったら自動折り返し タグ

クリックありがとうございます、また質問させて頂きます。
今メモ帳でホームページを作成中です。
素人質問かもしれませんが、お力貸して下さると助かります。

小説ページを作成しているのですが、その中でTABLEを幅固定して自動折り返しさせる方法がわかりません。
色々なサイト様を巡らせて頂き、

<table width="750" cellpadding="20" border="0" style="table-layout:fixed;">

↑こういうタグを打った所(勿論最後に</table>とかつきます)、幅は固定されるものの、width=750の大きさのラインで文字が折り返されず途切れてしまいました。
(メモ帳には「テストテストテストテスト」と打っていても、ページを開くと「テストテストテス」で文章が終了してたりする、ということです。)
また、table width="数字"や、パーセンテージで設定すると幅自体が固定されません。

検索で、半角英数字の連打(例:aaaa)は普通の設定だと折り返しされないと知ったため、「テストテストテスト」などの単語を連続して試しています。
最終手段の、<br>使用はなるべく控えたいと思っています。
上手く固定出来るタグを教えて頂けると嬉しいです。
宜しくお願いします。

クリックありがとうございます、また質問させて頂きます。
今メモ帳でホームページを作成中です。
素人質問かもしれませんが、お力貸して下さると助かります。

小説ページを作成しているのですが、その中でTABLEを幅固定して自動折り返しさせる方法がわかりません。
色々なサイト様を巡らせて頂き、

<table width="750" cellpadding="20" border="0" style="table-layout:fixed;">

↑こういうタグを打った所(勿論最後に</table>とかつきます)、幅は固定されるものの、width=750の大きさのラインで文...続きを読む

Aベストアンサー

以下のように指定すると改行されました。
ちょっと今のところ他に方法が思いつきません・・・

td {
word-break:break-all;
}

独自拡張なのでちょっと迷いますね。

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

 とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

参考URL:http://www.tohoho-web.com/css/basic.htm

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qphpにcssを適応させたいのですが?

phpで出力させた結果をブラウズするのに、css指定させたいのですが?

できるのでしょうか?

Aベストアンサー

PHPだから特別な考えはしなくて良いです

PHPはあくまでも、サーバー側で動いて、その結果を出力させるだけです

つまり出力させたHTMLにごくごく普通にCSSを適用させれば良いだけです
又、テクニックとしCSSそのものをPHPで処理させることも可能ですよ

例えば
---------------index.html(又はindex.php)のhead内
<link rel="stylesheet" type="text/css" href="stylecss.php"/>
---------------

------------stylecss.php
BODY {
background-color: #<?php echo $background; ?>;
margin: 0px;
}

A:link {
color: #<?php echo $acollar; ?>;
text-decoration:none;
}
-----------
のようにしてしまって、CSSそのものを動的に生成することも可能です

PHPだから特別な考えはしなくて良いです

PHPはあくまでも、サーバー側で動いて、その結果を出力させるだけです

つまり出力させたHTMLにごくごく普通にCSSを適用させれば良いだけです
又、テクニックとしCSSそのものをPHPで処理させることも可能ですよ

例えば
---------------index.html(又はindex.php)のhead内
<link rel="stylesheet" type="text/css" href="stylecss.php"/>
---------------

------------stylecss.php
BODY {
background-color: #<?php echo $background; ?>;
margin: 0px;
...続きを読む

Qの高さ固定。情報増加時、高さ自動変化

<table>で<td>の中に入れる文字の行が
多くなったり少なくなったりする形のもので
少ないときは高さを150pxに固定し、
多くなったときは行数に合わせて
自動的に高さが変化するものを作りたいです。
サンプルを作ってみました。
アドバイスをお願いいたします。

<html>
<head>
<title></title>
<body>
<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table>

<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

<table>で<td>の中に入れる文字の行が
多くなったり少なくなったりする形のもので
少ないときは高さを150pxに固定し、
多くなったときは行数に合わせて
自動的に高さが変化するものを作りたいです。
サンプルを作ってみました。
アドバイスをお願いいたします。

<html>
<head>
<title></title>
<body>
<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table...続きを読む

Aベストアンサー

こんばんは。

TABLEのheight:150px;をやめる。
TDにstyle="min-height:150px;"

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む


人気Q&Aランキング