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

質問

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は使用しない。

回答No.6

ORUKA1951

う～ん。Firefox,IE,Opera,Safariの最新ブラウザ対応となると、この方法しかなさそう。
とりあえず、２行３列について試してみた。

回答No.5

ORUKA1951

＞ヒントだけでも
　まだ検討中・・実用性がないので後回しなのでね。

上:tableをblock,trをinline-block、tdをblock
下:tdを隣接セレクタで区別してabsolute

回答No.4

ORUKA1951

困ってるわけじゃなさそうなので、あまりこういうのには参加しないのだけれども、個人的に興味があって試してみたけど。
　firefox.Opera,Sfariは大丈夫だけど、IEはtable要素をblock要素に変換しないため、ダメだね。相変わらず、くそIE・・・こいつのためにいつも泣かされる。

お礼

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

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

回答No.3

fujillin

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

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

qualheart

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

補足

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

回答No.1

yambejp

経験上「ない」と思いますが、ないことは証明できないので
「わからない」というのが回答です

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

補足

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

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