- 締切済み
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は使用しない。
- みんなの回答 （6）
- 専門家の回答
- fujillin
- ベストアンサー率61% (1594/2576)
ご提示のサンプル限定で、無理やり… 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で確認） 既回答者様の回答の通り、実用的にはナンセンスですけど。
お礼
ご返答ありがとうございます。 チャレンジングですけど、実現に向かおうとするとてもいいアイディアですね！ 後で試してみます。 他にもアイディアが浮かびましたら。ご連絡ください。 よろしくお願いいたします、ありがとうございます。
補足
ご返答ありがとうございます。 チャレンジングですけど、実現に向かおうとするとてもいいアイディアですね！ 後で試してみます。 他にもアイディアが浮かびましたら。ご連絡ください。 よろしくお願いいたします、ありがとうございます。
- qualheart
- ベストアンサー率41% (1451/3486)
無理だと思います。 このようなレイアウト変更を想定される場合、TABLEタグじゃなく、各要素をDIVで区切るのが普通かと。 見栄えはテーブルと同じく、CSSを切り替えることで縦にも横にもできます。
補足
ご返答ありがとうございます。 おっしゃる通りです。divで組むべきです。ただ今回は既成のものを後から変更しなければならず、HTMLの書き換えができないためにこのような課題（CSSのみでの変更）が発生してしまいました。 何かそれらしく見せるだけでも構わないので、何かアイディアが浮かびましたら、ご報告くださいませ。 よろしくお願いいたします。ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
経験上「ない」と思いますが、ないことは証明できないので 「わからない」というのが回答です 構造が違うので常識的にはありえませんけどね。
補足
ご明確な回答ありがとうございます。 何かそれらしく見せるだけでも構わないので、アイディアが浮かびましたら、ご報告くださいませ。 よろしくお願いいたします。ありがとうございました。
お礼
確かに困り度はつけすぎました。すみません。 興味を持っていただいてありがとうございます。とても素晴らしい回答だと思います。 とりあえずIEに関しては考慮しないとして、良ければCSSの記述方法を教えていただきたいと思います。もちろん事前に予測しうる範囲でチャレンジしてみたのですが、行き詰ったためご教授願えればと思います。もしくはヒントでも…。 よろしくお願いいたします。ご回答ありがとうございます。