- ベストアンサー
tr 無視されます padding
テーブルに対してcssで table[summary="トップページ"] tr{ padding:30px 30px; } は効かないのですか？ table[summary="トップページ"] th{ padding:30px 30px; } や table[summary="トップページ"] td{ padding:30px 30px; } は適用されますが tr だけが無視されます。
- tpokxbswmctlu
- お礼率93% (40/43)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
CSSの仕様です。元から <tr> には "padding" が適用されません。 それ以外に、thead、tfoot、tbody、col、colgroup～にも適用できません。
その他の回答 (1)
- think49
- ベストアンサー率59% (285/482)
table は特別なレイアウト方法をとる為、tr { padding: 20px; } は無効です。 他の方法を模索してください。 http://jsfiddle.net/vx5mqmev/ # Re: tpokxbswmctluさん
お礼
どうもありがとうございました。
関連するQ&A
- padding 一つにまとめるには？css
<html> <head> <title>test</title> <style type="text/css"> td{padding:10;} </style> </head> <body> <table border=1> <tr><th>a</th><th>b</th></tr> <tr><td>c</td><td>d</td></tr> </table> </body> </html> これで、 cとdの行のtdタグの表の幅は設定できますが、 全ての行の表の幅を1行のcssで設定するにはどうすればいいでしょうか？ table{padding:10;} とすると、 表の幅は0になってしまい、テ^ブルの中の幅が広がってしまいます。 tr{padding:10;} にすると何もcssが適用されてないのと同じ状態になります。 th{padding:10;} td{padding:10;} で理想の形になるのですが、 なぜ tableやtrでは出来ないのでしょうか？ 1つにまとめられないのですか？ 添付画像は理想の形です。
- ベストアンサー
- HTML
- padding:が効かない
<table summary="mid_table"> <tr><td class="mid_table"> <h3>test</h3> </td></tr> </table> にたいして、 td.mid_table{ padding:50px 50px; } としてるのに、できてません。 <h3>が原因ですか？ paddingで隙間の調整をしたい場合はどうすればいいでしょうか？
- ベストアンサー
- HTML
- cssを一つにまとめる事はできますか？
table[summary="テーブル"] th{ padding:0px 0px; } table[summary="テーブル"] td{ padding:0px 10px; } という、cssを一つにまとめる事はできますか？ table[summary="テーブル"] th,td{ padding:0px 0px; } とすると、うまく表示されません。
- ベストアンサー
- CSS
- paddingはテーブルに対して行えないの？
cssのpaddingはテーブルに対して行えないのでしょうか？ table[summary="table_あ"] { text-align: center; padding: 20px 0px; } というcssを設定すると text-align: center; は適用されているのに padding: 20px 0px; は無視されます。 http://www.tagindex.com/stylesheet/table/padding.html を参考にしたのですが、 もしかして、 tableでpaddingは使えないのでしょうか？ 上下のみ空白が欲しいので20px 0pxとしました。
- ベストアンサー
- HTML
- table[summary="table_1"]
table[summary="table_1"] td,th{ padding: 5px 10px; } とスタイルシートで設定した場合、 <table summary="table_2"> のthには、 padding: 5px 10px;は適用されないですよね？ 上記のcssでthタグにpadding: 5px 10px;が出来ようされるのは、 "table_1"だけですよね？
- ベストアンサー
- CSS
- cssで、1行2段のtableを記述するには？
cssで、1行2段のtableを記述するには？ → htmlのページに以下を挿入しました。 <table> <tr> <td width="2"></td> <td width="588"></td> </tr> </table> → htmlのページの<head>と</head>の間に以下を挿入しました。 <link rel="stylesheet" type="text/css" href="table.css"> → table.cssファイルを、onimotsuさんの指示に従い、以下のように記述しました。 TABLE{width : 640px;border-width : 0px 0px 0px 0px; padding-top : 0px;padding-left : 0px;padding-right : 0px; padding-bottom : 0px; background-color : #FFFFFF;} → table.cssファイルに以下を挿入するにはどうしたらいいのでしょうか？ いろいろ試しましたが、うまくいきません。 <tr> <td width="2"></td> <td width="588"></td> </tr> → うまく挿入できれば、htmlのページのtableの項は次のようにすっきりとなります。 <table> </table> よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
- スタイルシートでpaddingを使うと背景がずれる
はじめまして。はじめて質問させて頂きます。 スタイルシートに関する質問なのですが、例をあげて質問させて頂きます。 sample.html---------------------------- 途中抜粋 <table border="0" cellspacing="0" cellpadding="0" > <tr> <td id="key1">例</td> </tr> </table> style.css-------------------------------- td#key1 {background-image: url(image/sample.gif); vertical-align: top; padding-top: 5px;} 以上のようにテーブルの中で"例"という文字を上から5px分下にずらしたいので、vertical-align: top; padding-top: 5px; と記述してあげたのですが、"例"という文字と同時に、背景である(sample.gif)も同時に下方向にずれてしまいます。背景がずれないようにするには vertical-align: top; padding-top: 5px; という記述以外に何か記述方法がありますでしょうか？ よろしくお願い致します。
- 締切済み
- HTML
- CSSを使ってテーブルでセル全体をリンクしたい
CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 ４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？ 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます ＜ｃｓｓの方＞ 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; } ＜ｈｔｍｌの方＞ <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> よろしくお願いします
- ベストアンサー
- HTML
- ブラウザによってテーブルのセルの高さが変わる
質問させて頂きます。 現在、テーブルを使用して表を作っているのですが、 ブラウザによってセルの高さが変わってしまいます。 safariでは思った通りのレイアウトになるのですが、 chrome、Firefoxでは [ height ] の値が反映されていないのか、 崩れてしまいます。 添付は希望するレイアウト（safariではこのように表示されます）です。 ソースを記載しますので、どなたかご教示お願い致します。 --- html --- <table class="hogs" cellspacing="5"> <tr> <td width="180" height="184" rowspan="3"><img src="img/001.gif" width="180" height="184" alt=""/></td> <th height="22">項目１</th> <td>文章１</td> </tr> <tr> <th height="22">項目２</th><td height="22">文章２</td> </tr> <tr> <th height="140" valign="top">項目３</th><td valign="top">文章３</td> </tr> </table> --- CSS --- table.hoge { background-color: rgba(50,50,50,0.3); width: 640px; height: 184px; margin: 0 auto 18px; padding: 10px; } table.hoge th { height: 22px; background-color: #7ac0c9; width: 80px; } table.hoge td { padding: 0 20px; }
- ベストアンサー
- HTML
お礼
どうもありがとうございました。