- ベストアンサー
cssを一つにまとめる事はできますか？
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
同じでないのだまとめられません。 0px 10pxの間違いなら下記のようにできます table[summary="テーブル"] th, table[summary="テーブル"] td{ padding:0px 10px; }
関連するQ&A
- tr 無視されます padding
テーブルに対してcssで table[summary="トップページ"] tr{ padding:30px 30px; } は効かないのですか？ table[summary="トップページ"] th{ padding:30px 30px; } や table[summary="トップページ"] td{ padding:30px 30px; } は適用されますが tr だけが無視されます。
- ベストアンサー
- 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を使ってテーブルでセル全体をリンクしたい
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
- 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
- cssでtableを指定したい
教えてください。 cssでテーブルを指定しているのですが、別の幅のテーブルを指定したいときはどうすればよいのでしょうか。 現在はこういうふうに書いています。ちょっと汚いですが。。。 ----------------------------- #content #main p{ margin:10px 18px 25px; font-size:12px; } #content #main table { border-collapse: collapse; background-color: #FFFFFF; width: 480px; margin:0px padding; border: 0px #000000: 1px; } #content #main caption{ text-align: right; padding-right: 5px; font-size:12px; } #content #main th { border: #999999 1px solid; font-size:12px; font-weight: normal; background-color: #D8EAFC; padding: 5px; } #content #main td{ border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid; font-size:12px; text-align: left; padding: 5px; } ----------------------------- 実際にタグを書くときは、こう書いています。 ----------------------------- <table> <tr> <th>aaaa</th> <td>5555555555555555555555555555</td> </tr> </table> ----------------------------- これをmaintable subtable というふうに幅が違うものにしたいのですが、cssにmaintableを追加して、<table class=maintable">と指定しても、maintableではなく、tableで表示されます。 こういう場合はどうすればよいのでしょうか？
- ベストアンサー
- XML
- 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> よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
- フルCSSプロフェッショナルテンプレの表作成
ビルダー15に同梱のフルCSSプロフェッショナルテンプレートで、まったく別の色の表を作成したいのですが、フルCSSのせいで、背景色が反映されません。 １、まったく別の表のためのCSSはどのように書けばいいのでしょうか？ ２、それをどのように記述すればよいでしょうか？ ３、または、フルCSS”表のデザイン”で選んだ表は、文字が小さく嫌なので、文字を大きく表示する方法はあるのでしょうか？（文章ごとにフォントサイズの変更しなきゃだめ？） ↓↓こんな感じで書いてみたのですが・・・。 CSSコード .example table { width: 640px; border: 1px #ff6347 solid; border-collapse: collapse; } .example td { border: 1px dashed; background-color: #ff6347; padding: 0 6px; } .example th { border: 1px dashed; background-color: #9acd32; } HTMLコード <div class="example"> <table> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> <th>1-4</th> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table> </div>
- ベストアンサー
- ホームページ作成ソフト
- テーブルの中の下には少し空白を入れたい場合
table[summary="回答"] td{ padding:0px 5px; } これで上下左右に空白を入れられますが、 テーブルの中の上には空白を入れたくなくて、 テーブルの中の下には少し空白を入れたい場合どうすればいいですか？ table[summary="回答"] td{ padding:0px 5px; } これだと上下どちらも空白がなくなるので、 table[summary="回答"] td{ padding:0px 5px; margin-bottom:20px; } にしたのですが、 margin-bottom:20px; は適用されてません。
- ベストアンサー
- CSS
- CSSの設定方法について
CSSは外部ファイルにし、十数枚あるHTMLに「div id=contents内にあるTableは全て共通のレイアウト」 となるよう下記のCSSを設定しました。 --------CSS----------------------------------------- #contents{margin-left: 70px;} #contents table{width: 650px; border: solid 1px #B1B2B2; border-collapse: collapse; margin: 15px 0px;} #contents tr, td ,th{padding: 4px; border: solid 1px #B1B2B2; border-collapse: collapse;} --------HTML----------------------------------------- <div id="contents"> <table> <tr> <th>項目</th> </tr> <tr> <td>項目1</td> </tr> </table> </div> ------------------------------------------------------- しかし、どうしても違うレイアウトにしたいTableが出てきた為、下記CSSを追加、 HTMLは<div id="contents">の部分を<div id="login">に変更したのですが 追加CSSが反映されず、id=contentsの設定が残ったままになってしまいます。 色々いじってみたのですが、どこが間違っているのやら皆目見当がつきません。 --------追加CSS----------------------------------------- #login{text-align: center; } #login table{width: 450px; border: solid 2px #666666; border-collapse: collapse;} #login tr, td ,th{border: solid 1px #666666; border-collapse: collapse;} --------HTML----------------------------------------- <div id="login"> <table> <tr> <th>項目</th> </tr> <tr> <td>項目1</td> </tr> </table> </div> 拙い文章で恐縮ですが、ご助言いただけると大変助かります。 説明不足や意味不明箇所は補足させていただきますので、どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- tableの外枠をCSSで表示させない方法
HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか？ HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。 線種はsolidを使いたいです。 よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css"> <!-- table.sample { width:550px; height:auto; border:solid 1px; border-collapse:collapse; border-left:none; border-right:none; } .sample th { width:100px; border:solid 1px; } .sample tr { border:solid 1px; } .sample td { border:solid 1px; } --> </style> </head> <body> <table class="sample" frame="hsides"> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
お礼
ご回答ありがとうございました。