- ベストアンサー
セルをまたがるリンク。
セルをまたぐようなリンクを作りたいのですが、何かいい方法はないでしょうか。 記述は間違っていますが、イメージ的には以下のようなことがしたいです。 <table> <tr> <td><a href="#">09月20日</td> <td>題名</a></td> </tr> </table> これができない理由はなんとなくわかっているので、これを実現するような方法は何かないでしょうか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
●例解です。 ・テーブルの行全体をリンク化することを前提。 ・完全な実装／検証は、ご自身でしてください。 ・他に、もっとすばらしい方法があるかもしれません。 ・動作確認は、IE6, Opera7.53, Firefox0.93 のみ --------------------------------------------------------------------- <style type="text/css"><!-- a:link.jsLink { color: #00c; text-decoration: none; } a:active.jsLink { color: #00c; text-decoration: none; } a:visited.jsLink { color: #808; text-decoration: none; } --></style> <script type="text/javascript"><!-- function linkOver(obj) { obj.style.backgroundColor = "#ffcc00"; } function linkOut(obj) { obj.style.backgroundColor = "#ffffff"; } // --></script> </head><body> <table> <tr onMouseOver="linkOver(this);" onMouseOut="linkOut(this);"> <td><a class="jsLink" href="foo.html">09月20日</a></td> <td><a class="jsLink" href="foo.html">題名</a></td> </tr> </table>
その他の回答 (3)
- kalze
- ベストアンサー率47% (522/1092)
javascript使って変更するってのはいかが？ javascript無効にされたら終わるけど
- siteuma
- ベストアンサー率28% (77/271)
セルを結合してしまう、というのは？ <table border="1"> <tr> <td rowspan="2"> <a href="#">09月20日<br> 題名</a> </td> </tr> </table>
- shinopo
- ベストアンサー率24% (26/105)
<table> <tr> <td><a href="#">09月20日</a></td> <td>><a href="#">題名</a></td> </tr> </table> 以上のように、別々にリンクするのはダメなんですか？
お礼
ご回答ありがとうございます。 うーん、できれば一緒にしたいんですよね… hoverで色を指定しているので、どうも不自然になってしまうのです。日付にマウスを乗せれば題名の色も変わり、逆に題名にマウスを乗せれば日付の色も変わるというようにしたいです。
お礼
いえ、横に並べたいので、申し訳ないのですがその方法ではちょっと無理ですね… なぜこのような面倒な方法をとるかというと、日付と題名の対を縦にたくさん並べたときに日付と題名の先頭がそろうようにしたいからです。 09.21.Tue 題名１ 09.22.Wed 題名２ 09.23.Thu 題名３ <TT></TT>を使って、日付に等幅フォントを使おうとしましたが、デザイン上、フォントを変更しない方法がいいです（verdanaを使ってます）。