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は使用しない。
A 回答 (6件)
- 最新から表示
- 回答順に表示
No.5
- 回答日時:
>ヒントだけでも
まだ検討中・・実用性がないので後回しなのでね。
上:tableをblock,trをinline-block、tdをblock
下:tdを隣接セレクタで区別してabsolute
No.4
- 回答日時:
困ってるわけじゃなさそうなので、あまりこういうのには参加しないのだけれども、個人的に興味があって試してみたけど。
firefox.Opera,Sfariは大丈夫だけど、IEはtable要素をblock要素に変換しないため、ダメだね。相変わらず、くそIE・・・こいつのためにいつも泣かされる。
確かに困り度はつけすぎました。すみません。
興味を持っていただいてありがとうございます。とても素晴らしい回答だと思います。
とりあえずIEに関しては考慮しないとして、良ければCSSの記述方法を教えていただきたいと思います。もちろん事前に予測しうる範囲でチャレンジしてみたのですが、行き詰ったためご教授願えればと思います。もしくはヒントでも…。
よろしくお願いいたします。ご回答ありがとうございます。
No.3
- 回答日時:
ご提示のサンプル限定で、無理やり…
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で確認)
既回答者様の回答の通り、実用的にはナンセンスですけど。
この回答への補足
ご返答ありがとうございます。
チャレンジングですけど、実現に向かおうとするとてもいいアイディアですね!
後で試してみます。
他にもアイディアが浮かびましたら。ご連絡ください。
よろしくお願いいたします、ありがとうございます。
ご返答ありがとうございます。
チャレンジングですけど、実現に向かおうとするとてもいいアイディアですね!
後で試してみます。
他にもアイディアが浮かびましたら。ご連絡ください。
よろしくお願いいたします、ありがとうございます。
No.2
- 回答日時:
無理だと思います。
このようなレイアウト変更を想定される場合、TABLEタグじゃなく、各要素をDIVで区切るのが普通かと。
見栄えはテーブルと同じく、CSSを切り替えることで縦にも横にもできます。
この回答への補足
ご返答ありがとうございます。
おっしゃる通りです。divで組むべきです。ただ今回は既成のものを後から変更しなければならず、HTMLの書き換えができないためにこのような課題(CSSのみでの変更)が発生してしまいました。
何かそれらしく見せるだけでも構わないので、何かアイディアが浮かびましたら、ご報告くださいませ。
よろしくお願いいたします。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
表の中の列の順番を入れ替える場合の表示方法
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
便箋風の罫線
-
テーブルの行を折りたたみたい...
-
ASP GridViewで1レコード2行を...
-
widthを指定しない<td>が幅をシ...
-
tableにul,または,olを入れられ...
-
htmlで数字に○を付与したいが出...
-
tableの中で<p>タグを使うと…
-
HTMLの表で幅を指定しても折り...
-
Htmlのtd要素の中で半角の空...
-
値が0なら非表示にしたい
-
ホームページビルダ14で、表の1...
-
文字の中央そろえを一括で指定...
-
cssでテーブルの位置を設定する...
-
Safariでテーブルのセルの高さ...
-
テーブルの表示がずれます
-
表の中の列の順番を入れ替える...
-
DreamWeaverで複数ワードを一気...
-
エクセルをhtml変換した、html...
-
HTMLのrowspan
-
nowrapを指定しても改行される...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
cssで、表示されるテキストによ...
-
ホームページ 表の上の余白を...
-
tableでcolspanを使うと次行以...
-
中に<table></table>が使えるア...
-
html・cssで日付をキレイに揃え...
-
テーブルの行の高さを指定する...
-
テーブルタグのセルの幅の一部...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルのセルに画像をピッタ...
-
EXCELのセル内にHTMLタグを含む...
-
テーブルタグの中に<ol><li>を...
-
HTML <td></td>タグ セル内余...
-
テーブルの表示がずれます
-
テーブルの装飾
おすすめ情報