セルごとリンクにしたくて、以下の記述をしました。
【CSS】
------------------------------------------------------------------
a.widelink{
vertical-align:middle;
display:block;
//display:inline-block;
width: 100%;
height:100%;
//line-height:100%;
color: #000000;
text-decoration:none
}
a.widelink:hover{
vertical-align: middle;
color: #000000;
background-color: #9999FF;
text-decoration:none
}
td.bgchng{
align: center;
vertical-align: middle;
color: #000000;
margin: 0px;
padding: 0px;
}
td.bgchng:hover{
vertical-align: middle;
color: #000000;
background-color: #9999FF;
margin: 0px;
padding: 0px;
}
------------------------------------------------------------------
【HTML】
------------------------------------------------------------------
<TABLE border="1" bordercolor="#6666CC" cellspacing="0">
<TR>
<TD width="150" height="60" valign="middle" align="center" CLASS="bgchng">
<A href="test01.html" CLASS="widelink">
テスト<BR>(その1)
</A>
</TD>
<TD width="450" bgcolor="">
テスト(その1)の説明文<BR>
二行目
</TD>
</TR>
<TR>
<TD width="150" height="60" valign="middle" align="center" CLASS="bgchng">
<A href="test02.html" CLASS="widelink">
テスト(その2)
</A>
</TD>
<TD width="450" bgcolor="">
テスト(その2)の説明文<BR>
二行目<BR>
三行目
</TD>
</TR>
<TR>
<TD width="150" height="60" valign="middle" align="center" CLASS="bgchng">
<A href="test03.html" CLASS="widelink">
テスト(その3)
</A>
</TD>
<TD width="450" bgcolor="">
テスト(その3)の説明文<BR>
二行目
</TD>
</TR>
</TABLE>
------------------------------------------------------------------
この記述だとリンク文字がセルのTOPに来てしまい、中央寄せになりません。
思いつく限りの場所にvertical-alignやvalignを仕込んでみましたがダメでした。
line-heightであわせる方法もやってみましたが、<BR>を含むリンク文字の表示が二行揃ってくれず、ダメでした。
セル自体をリンクにして、さらにリンク文字を上下中央寄せにしたいのですが、やり方をご存知の方、教えてください。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
あーなるほどー、やりたいことはわかりましたが方法が…
aをpで囲んでpにaのスタイルを入れて~で出来た!と思ったら
Firefoxしかokじゃなかったです笑
何か方法見つかることをお祈りし、私は断念します…スミマセン
No.1
- 回答日時:
a に色々入れすぎな感じがします
a.widelink{
display:block;
color: #000000;
text-decoration:none
}
a.widelink:hover{
color: #000000;
text-decoration:none
}
これだけで希望の表示にならないっすかね?
この回答への補足
回答ありがとうございます。
>a に色々入れすぎな感じがします
…すみません、色々テストした残骸を残しています。
せっかくですが、教えていただいたやり方は試し終わっておりまして(すみません)…。
このやり方ですと、TD内のリンク文字の横一行全てリンクになりますが、リンク文字以外の部分がリンクにならないのです。
そのため、a内にheight:100%;としたのですが、そうするとリンク文字位置が上下中央ではなく、TD内TOPにきてしまうのです。
希望はTD内のどこをクリックしてもリンク先に飛べる&リンク文字は上下左右中央寄せです。
せっかく回答頂いたのに、生意気なことを書いて申し訳ありません m(-_-)m。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
外部CSSがFireFoxで反映されません
-
HTMLフォームのSELECTの幅を一...
-
テキストボックスの文字を右揃...
-
chromeだけbody直下に空白が開く
-
インラインフレームの表示位置...
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
スタイルシートで枠を作る方法
-
ホームページ 背景二枚重ね ...
-
テキストボックスの様に文字の...
-
<p>タグ内の行揃えについて
-
なぜ左に寄っているの?
-
DIVボックス内でのCSSを使用し...
-
Dreamweaverで画面サイズを一定...
-
CSS(スタイルシート)で画像の縦...
-
htmlでテーブル内にテキストボ...
-
道路幅を調べたいのですが
-
エクセルでサイズ指定でPOP...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
なぜ左に寄っているの?
-
インラインフレームの表示位置...
-
text-alignの解除の方法
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
端から端まで横線を引きたい
-
FireFoxで見るとブラウザの幅に...
-
macとwindowsのレイアウト崩れ...
-
ホームページビルダー 空白の...
-
<legend>で表示されるタイトル...
-
INPUT TEXT内の文字位置を指定...
-
CSSで、height:100%の中央寄せ
-
CSSの設定
-
テキストボックスの様に文字の...
-
フッターだけが真ん中に行って...
-
スタイルシートでh1の属性行間...
おすすめ情報