![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
CSSを使ってテーブルでセル全体をリンクしたい
CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。
4つのセル?を横並びにして(2段目は説明書き)、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。
block要素?を使うらしい?ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう?
色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。
ホームページ作りもCSSも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです
ソースをのっけておきます
<cssの方>
table#table-01 {
width: 600px;
border: 0px #E3E3E3 solid;
border-collapse: separate;
border-spacing: 20px 0;
}
table#table-01 th {
width: 130px;
height: 70px;
padding: 5px;
border: #E3E3E3 solid;
border-width: 1px 0 0 1px;
background: #F5F5F5;
font-weight: bold;
line-height: 120%;
text-align: center;
}
table#table-01 td {
vertical-align: top;
padding: 1px 3px 20px 0;
border: 0px #E3E3E3 solid;
border-width: 0;
text-align: center;
}
<htmlの方>
<table id="table-01" cellspacing="20px">
<tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr>
<tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr>
よろしくお願いします
No.2ベストアンサー
- 回答日時:
>>私の参考にしたホームページは全てCSSで作成されていますが。
テーブルをあえて不要なdivを多用して作成する理由はないと思います。
>>リンクしたい・・・
とのことなので、おそらくth以下にaタグがあると思いますので、
下記cssを追加すれば行けるのではないでしょうか?
(line-heightを固定すると文字サイズ拡大時にはみ出す等の問題はありますが)
[css追加]
th a{
width: 130px;
line-height: 70px;
display:block;
}
この回答への補足
やってみたらセル全体リンクできるようになりました。
ありがとうございます
ただ th内に入れた文字が2段になるときは、高さが勝手に変わって2倍になってしまいます
(セル内の文字も上下大きく離れてしまいます)
line-heightをただのheightに変えてみたら高さはバッチリなのですが、セル内の文字が上に寄ってしまいました
th内の文字を2段になる長さの時でも中央に配置するようには出来るでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
tableの位置がIEとその他ブラウ...
-
フォームタグのプルタウンの隙...
-
<th>タグを使っても太字にしな...
-
HTMLのテーブルをExcelにCopy&P...
-
HTML5で、テーブル内tdタグの高...
-
ラインを端から端まで画面いっ...
-
CSS スタイルを子要素の子要素...
-
CSSで特定のテーブルだけに...
-
テーブル内のセル間にスペース...
-
テーブルデータを折り返して表...
-
FC2のHPに「FC2投票」がうまく...
-
つり銭のプログラムについて
-
table表を横に並べる際の間隔指定
-
同じ幅指定のつもりなのに、ブ...
-
CSSを使ってテーブルでセル全体...
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルタグの中にdivを含めて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
table表を横に並べる際の間隔指定
-
HTML5で、テーブル内tdタグの高...
-
HTML tableのセルにtextareaを...
-
(HTML)Tableを任意の位置に置...
-
同じ幅指定のつもりなのに、ブ...
-
<fieldset>タグについて
-
画面幅に合わせてテーブルのカ...
-
tableを縦に続けるとtable間の...
-
html5のテーブル内でdivのタブ...
-
テーブル内のセル間にスペース...
-
ホームページのテキストを折り...
-
TR タグの表示・非表示を一括で...
-
tableの位置がIEとその他ブラウ...
-
textareaの外側の文字が下付き...
-
テーブルの高さを100%にしたけ...
-
ラインを端から端まで画面いっ...
おすすめ情報