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 回答日時： 2010/02/06 01:46

う～ん。

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

No.5 回答者： ORUKA1951 回答日時： 2010/02/05 13:00

＞ヒントだけでも

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

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

No.4 回答者： ORUKA1951 回答日時： 2010/02/05 01:24

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

　firefox.Opera,Sfariは大丈夫だけど、IEはtable要素をblock要素に変換しないため、ダメだね。相変わらず、くそIE・・・こいつのためにいつも泣かされる。

この回答へのお礼

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

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

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

No.3 回答者： fujillin 回答日時： 2010/02/04 13:14

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

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

この回答へのお礼

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

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

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

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

No.2 回答者： qualheart 回答日時： 2010/02/04 12:23

無理だと思います。

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

この回答への補足

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

補足日時：2010/02/04 13:14

No.1 回答者： yambejp 回答日時： 2010/02/04 12:16

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

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

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

この回答への補足

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

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

補足日時：2010/02/04 13:17