tableの枠について

2023/08/09 02:09

このQ&Aのポイント

tableの枠についての質問です。width: 750px;の設定でも文字と外枠の間に隙間ができてしまいます。
cssとhtmlでtableのスタイルを設定しましたが、枠に関して問題が発生しています。
tableの幅を750pxに設定していますが、文字と枠の間に隙間ができてしまいます。解決方法を教えてください。

ベストアンサー

tableの枠について

2009/07/20 10:00

よろしくお願いします。前回もtableについて質問をさせていただきましたが、今回は若干内容が違うため新たに質問させていただきましたよろしくお願いします。まず、cssとhtmlに以下の記述をしました。【css】 table{ border: 2px solid #000000; border-collapse: collapse; width: 750px; margin-left:auto; margin-right:auto; } th.g{ border: 1px solid #000000; text-align: center; padding:10px; font-size: 1.0em; font-weight:bold; width: 750px; color: #0066cc; } 【html】 <table> <tr><th class="g">パソコン</th>tr> 上記の部分をブラウザで見るとwidth: 750px;の設定はしているのですが「パソコン」の文字に出来た枠と、外枠との間に右側ですが隙間が出来てしまいます。margin: autoではと思い、設定をしてみましたが特別何も変わりません。どなた様か、ご指導の程よろしくお願いします。

pcckit
お礼率76% (472/621)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

reggaepunc
ベストアンサー率59% (64/108)

2009/07/20 12:46 回答No.1

私、firefox3で見ていますが、右側に隙間がないようです。ブラウザは何を使用していますか？もしくは、上記に記述されたcss以外のcssがtableに影響している可能性はありませんか？

質問者

お礼 2009/07/20 13:54

ありがとう御座いました。今回の件に付きましてはお陰さまで解決できました。ありがとう御座いました。また、別の問題で新たにご質問をさせて頂きました。よろしければご指導の程よろしくお願いします。

関連するQ&A

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
tableの外枠をCSSで表示させない方法
HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか？ HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。線種はsolidを使いたいです。よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css">  </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
css テーブルについて
よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }
- ベストアンサー
- 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
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
テーブルの設幅固定がオフラインで崩れます
WEBサイトでテーブルのセル幅を固定しているのですが、オンライン環境では意図通りになるものの、オフライン環境では固定されずに崩れてしまいます。固定方法は、外部CSSで「table-layout:fixed;」と「各セルのwidth指定(class)」を記述しています（下記ご参照下さい）。外部CSSへのリンク指定は絶対パスではなく相対パスで指定しており、オフライン環境でもCSSの参照は出来ていると思います（セル幅以外の記述内容は反映されます）。どこに原因があるのか分からずに困っています。お分かりになる方がおられましたら、ご教示頂きたくお願い申し上げます。【CSS】 table.t { border:1px solid #000000; border-collapse:collapse; table-layout:fixed; font-size:13px; } table.t td{ border:1px solid #000000; height:13px; } table.t th{ border:1px solid #000000; font-size:13px; } .index{ width:155px; } .remarks{ width:100px; } .code{ width:120px; } ・・・【HTML】 <table class="t"> <thead> <tr> <th class="index">INDEX No.</th> <th class="remarks">Remarks</th> <th class="code">Part code</th> ・・・
- ベストアンサー
- CSS
FIREFOXでのテーブル表示崩れについて
お世話になります。レイアウト崩れについて質問させて頂きます。現在下記のようにしています。 IE9、Safari、Chromeでは問題ないのですが、FireFoxで見た時に添付画像の用になってしまいます。いろいろ試してみたのですが、原因がわかりません。この現象の原因が思い当たる方いましたらアドバイスをください。 HTML <table class="list"> <thead> 　<tr> 　　<td>テスト</td> 　</tr> 　<tr> 　　<th class="tdptn100">Line1</th> 　　<th class="tdptn100">Line2</th> 　　<th class="tdptn380">Line3</th> <th class="tdptn100">Line4</th> <th class="tdptn100">Line5</th> <th class="tdptn50">Line6</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> CSS table.list { width: auto; border: 2px solid #000; border-collapse: collapse; margin-left: auto; margin-right: auto; } .list th { font-size: 60%; } .list td { font-size: 60%; display:block; }
- ベストアンサー
- HTML
CSSのテーブルについて教えて下さい。
テーブルなのですがh1が適用されません。又表の枠線が黒になりません。また（休診）を赤にしたいのですが表示されません。どこをどう直したらいいのか教えて下さい。お願いします。 h1 { margin: 1em 0; padding: 0.3em; border: 1px silver solid; background: url(../image/subpage_h2_bg.gif) bottom repeat-x; color: gray; font-weight: bold; font-size: large; } /*hyou*/ caption{ color: #996666; padding-bottom: 14px; text-align: center; } table{ width: 800px; border: solid 2px ; border-collapse: collapse; } th,td { padding: 5px; border: solid 1px #000000; text-align:center; } th { background-color:silver; font-weight: bold; } td.col01{ font-weight: bold; background-color:silver; } em { color: red; font-weight: bold; } /* テーブル列幅指定 */ .cola { width:100px; } .col01{ width: 100px; } .col02{ width: 70px; } .col03{ width: 70px; } .col04{ width: 70px; } .col05{ width: 70px; } .clo06{ width: 70px; } .style1 {margin-left:1em; } HTML <h1>外来診療のご案内</h1> <table> <caption>外来診療　予定表</caption> <tr> <th class="a">診察科</th> <th class="b">月</th> <th class="c">火</th> <th class="d">水</th> <th class="e">木</th> <th class="f">金</th> <th class="g">土</th> <th class="h">日</th> </tr> <tr> <th class="col01">一般歯科</th> <td class="col02" rowspan="4"><em>休診</em></td> <td class="col03" colspan="5">◯</td> <td class="col04" rowspan="4"><em>休診</em></td> </tr> <tr> <th class="col01">小児歯科</th> <td class="col02">◯</td> <td class="col03"> </td> <td class="col04">◯</td> <td class="col05"> </td> <td class="col06">◯</td> </tr> <tr> <th class="col01">歯列矯正</th> <td class="col02"> </td> <td class="col03">◯</td> <td class="col04"> </td> <td class="col05">◯</td> <td class="col06"> </td> </tr> <tr> <th class="col01">審美歯科</th> <td class="col02"> </td> <td class="col03">◯</td> <td class="col04"> </td> <td class="col05"> </td> <td class="col06">◯</td> </tr> </table>
- ベストアンサー
- HTML
borderが1のテーブル
ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか？私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
FireFoxでCSSのボーダーが反映されません
FireFoxでのCSS表示について教えて下さい。現在、IEでは見れるものがFireFoxで反映されておりません。どこかに原因があるとは思うのですが、見つからないのです。。。涙 Bodyとページ全体のCSS、及び問題箇所のCSSを記述します。 #body { margin: 0px; 　width: 100%; 　padding: 0px; 　border: 0px; 　height: auto;} #page { background-color: #ffffff; 　width: 746px; 　height: auto; 　margin: 0px; 　padding: 0px; 　border-collapse:collapse; 　border: 0px; 　border-spacing:0px;} #page td {line-height: 120%; 　font-size: 12px; 　color: #000000;} #contents1 {width: 746px; 　border-collapse:collapse; 　border-spacing:0px; 　margin:0px 0px 5px 0px;} 　border: 1px solid #666633; #contents td {font-size: 12px; 　line-height: 120%; 　color: #000000; 　padding-top: 2px; 　padding-bottom: 2px;} #contents2 {width: 350px; 　height: 45px;} #contents2 td { border: 1px solid #999999; 　font-size: 12px;} ※contents1は外枠のみボーダーカラーをつけたいと思います。 contents2では、tdのみ枠をつけて、外枠は表示させたくありません。 (大枠の中にいくつか枠付きの行が表示される状態にしたいです) idではなくclassにする方が良いのでしょうか？ CSSについては独学なので、記述もほとんどDW頼りです。参考サイトなどご存知でしたら教えて下さい。。。以上、よろしくお願いいたします。
- ベストアンサー
- CSS