下記のように<table>の行の間隔を狭める為、CSSのline-height: をつかっているのですが、
<td>の内側に<a hrefを使っているのが原因なのか、line-heightが効きません。
sample.css
table td.aa {
font-size : 0.8em;
line-height:150%;
}
sample.html
<table>
<tr><td class="aa"><a href="http://......">ああああああああ</a>
</td></tr>
<tr><td class="aa"><a href="http://......">いいいいいいいい</a>
</td></tr>
</table>
どなたかお助けください。
No.3ベストアンサー
- 回答日時:
ANo.1-2様のご指摘にある様に2行以上にしてみても結果が変わらない場合について。
> 下記のように<table>の行の間隔を狭める為、CSSのline-height: をつかっているのですが、
> <td>の内側に<a hrefを使っているのが原因なのか、line-heightが効きません。
内部にaタグがあるかないかは、aタグに対して150%より広いline-heightを("table td.aa"というセレクタより詳細度が高くなる様に)指定していない限りは、関係ないです。
また、td内の「行の間隔を狭める為」なのであれば、現在の様にtdに対して直接line-heightを指定する方法(無駄に入れ子を作らない)で間違ってもいません。
ただ、"line-height:150%;"というのはどちらかと言えば”割と広め”な値の様に思われます。これで「狭める」という事は、親要素のline-heightの値はもっと大きい(151%以上)のでしょうか?もしも親要素の値よりこちらが小さくなっていないのであれば結果として「狭め」られた様には見えないので。
それから、「狭め」たいのは本当にtd内の”行間”ですか?”余白”ではなく?もし余白であれば、paddingプロパティの値を調節するのが適切ですが。
提供されたCSSのソース以外の箇所からの継承関係がわかれば、現在思い通りの表示にならない原因が何かという事を突き止めやすくなります。もう少しCSSの情報を詳しく公開された方が宜しいかと。
No.2
- 回答日時:
こんにちは。
(回答)質問者さんがおっしゃる通り、line-heightは行間を調節する機能ですから、2行以上の文章があって始めて、その違いが大きく現れるものだと思います。
(根拠)質問者さんのソースをコピーして実行したところ、line-heightは無事に動作したので間違いないと思います。
回答ありがとうございます。
複数ある行(<tr>)間の間隔を狭めたいと思っています。
line-height:150%を 0.5emにしたら、私が望む結果となりました。
No.1
- 回答日時:
一行ずつだから、または150%だから分かりづらいのではないでしょうか。
<table>
<tr><td class="aa"><a href="?http://......">?ああああああああ</a><br>
たたたたた
</td></tr>
<tr><td class="aa"><a href="?http://......">?いいいいいいいい</a><br>
ちちちち
</td></tr>
</table>
として、line-height の% を300とか数値を変えてみてはどうでしょうか。
また、tdに指定するのではなく、<div class=aa>~</div> の方が確実だと思われます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- Perl PERL 1 2022/04/26 14:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS line-height が効かない
-
HTMLでテーブルを縦に並べたい!
-
テーブルの中のグラデーション...
-
Firefox2で縦方向に隙間が出来...
-
table内で画像と文字をセンター...
-
Excelで可視部分だけをWeb形式...
-
htmlでテーブル内にテキストボ...
-
エクセルでサイズに合ったもの...
-
Excel で等間隔で縦線を引きた...
-
<tbody>は何のためにあるんでし...
-
【エクセルVBA】シェイプのサイ...
-
インラインフレームの表示位置...
-
CSSのtransform: translate(-50...
-
markdownでテーブルの罫線は、...
-
エクセルでサイズ指定でPOP...
-
【ホームページビルダー】表の...
-
HTMLでブラウザを終了させる方法
-
window.openした時、親ウィンド...
-
PDFへてのテキストボックスにて...
-
エクセルの行の幅がずれる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
table内で画像と文字をセンター...
-
<td> 内のテーブルを上寄せにす...
-
HTMLでテーブルを縦に並べたい!
-
表の中に表
-
テーブルで3セル作った行の下に...
-
Excelで可視部分だけをWeb形式...
-
スタイルシートで<table>の内側...
-
Jimdoで表組のなかの画像をポッ...
-
テーブルとテーブルの間に、隙...
-
WebにてExcelを生成してダウン...
-
<TABLE><TD><TR>~内のアンカー
-
DWでのメールフォーム作成
-
表の中でのフォーム
-
プリントアウト時、ページ内容...
-
CSS line-height が効かない
-
htmlのセル幅固定の仕方
-
valign="top" が効かない
-
cssのfont-sizeがFirefoxで効か...
-
width="150" に収まるように・...
-
ドリームウェーバー(ウィーバ...
おすすめ情報