プロが教えるわが家の防犯対策術！

急いでいます！

divの中にtableを入れていますが、table width＝"150"が有効になりません

締切済

現在、ホームページビルダー19でホームページを作成中です。
テンプレートから作成を始めたため、スタイルシートが組み込まれています。
右サイドの部分に、営業日カレンダーを入れたのですが、どうしても　table　width="150">　が効きません。
#hpb-aside{ width: 229px;　→この229px以内に幅を納めたいのに、はみ出てしまいます。
cssには詳しくありません。cssファイルにそれらしい記述を探し、以下に貼り付けました。

どなたかわかる方がいらっしゃいましたら教えて下さい。



～html記述～
<div id="shopinfo">
<h3><span class="ja">営業日カレンダー</span></h3></div>
<table border="0" cellpadding="2" cellspacing="1" bgcolor="#666666" width="150">
<tr align="center" bgcolor="#FFFFFF">
<td colspan="7">2016年10月</td>
</tr>
<tr align="center" bgcolor="#CCCCCC">
<td>日</td>
<td>月</td>
<td>火</td>
<td>水</td>
<td>木</td>
<td>金</td>
<td>土</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td bgcolor="#FF9999">1</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FF9999">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td bgcolor="#FF9999">8</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FF9999">9</td>
<td bgcolor="#FF9999">10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td bgcolor="#FF9999">15</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FF9999">16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td bgcolor="#FF9999">22</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FF9999">23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td bgcolor="#FF9999">29</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FF9999">30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<font color="#FF9999">■</font>が定休日です。



～cssファイル記述①～
#shopinfo {

}

#shopinfo h3{
text-align: center;
font-size: 1.1em;
font-weight: normal;
line-height: 41px;
margin-top: 0;
margin-left: 0 ;
margin-bottom: 2px;
padding-right: 15px;
height: 41px;
background-image : url(../image/sideBg_8Fa.png);
background-position: left top;
background-repeat: no-repeat;
}

#shopinfo h3 span.ja{
font-size: 1em;
padding-left: 10px;
}

#shopinfo h4{
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
font-size: 1.1em;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #63bcdd;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #63bcdd;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #63bcdd;
}

#shopinfo p{
margin-left: auto;
margin-right: auto;
margin-top: 0;
line-height: 1.5;
padding-left: 10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #63bcdd;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #63bcdd;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #63bcdd;
}

#shopinfo a{
line-height: 1.7;




～cssファイル記述②～
/* ========== aside ========== */

#hpb-aside #ranking ol li{
margin-bottom: 5px;
}

#hpb-aside #shopinfo .en{
display: none;
}

#hpb-aside #shopinfo{
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
background-image: -webkit-gradient( linear, left top, left bottom, from(#fff), to(#eee));
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
-webkit-border-radius: 2px;
}


}


～cssファイル記述③～
#hpb-aside{
width: 229px;
float: right;
padding-top: 20px;
}
.hpb-layoutset-02 #hpb-aside{
padding-top: 0px;
margin-top: -35px;



宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4

  • 回答者： ORUKA1951
  • 回答日時：

こんなシンプルなのものでよい。

わかりやすいのでメンテナンスも容易
ウィンドウの幅を変えても・・スマホでもそのまま利用できる。

[全文]
※ タブは＿に置換してあるので戻す
※ Another HTML Lint( http://www.htmllint.net/html-lint/htmllint.cgi )
　で検証済み・・
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:95%;min-width:630px;max-width:1000px;margin:0 auto;padding:5px;}
div.section{position:relative;}
div.aside{
position:absolute;top:0;right:0;width:150px;height:100%;padding:0 10px;
}
div.aside table[summary="営業カレンダー"]{
＿width:100%;border-collapse:collapse;
＿}
div.aside table[summary="営業カレンダー"] th,
div.aside table[summary="営業カレンダー"] td{
＿border:solid 1px gray;text-align:center;
}
div.aside table[summary="営業カレンダー"] th{
＿color:white;background-color:silver;
}
div.aside table[summary="営業カレンダー"] tr+tr td:first-child,
div.aside table[summary="営業カレンダー"] tr+tr td.holiday{
＿background-color:fuchsia;
}
div.aside table[summary="営業カレンダー"] tr+tr td:last-child{
＿background-color:aqua;
}
table[summary="営業カレンダー"] captopn{
font-size: 1.1em;line-height: 41px;margin: 0 0 2px 15px;
background: url(../image/sideBg_8Fa.png) no-repeat;}

div.aside h4{
margin:0 auto;
font-size: 1.1em;
padding:10px;
border: 1px solid #63bcdd;
}
div.aside p{
margin: 0 auto;
line-height: 1.5em;
padding: 5px 10px 10px 10px;
border: 1px solid #63bcdd;
border-bottom-width:0;
}
body>div.section{background-color:rgb(220,220,220);}
div.section div.aside{background-color:yellow;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="aside" id="shopinfo">
＿＿＿<table border="1" summary="営業カレンダー">
＿＿＿＿<caption>営業日カレンダー</caption>
＿＿＿＿<tbody>
＿＿＿＿＿<tr>
＿＿＿＿＿＿<td colspan="7">2016年10月</td></tr>
＿＿＿＿＿<tr>
＿＿＿＿＿＿<th abbr="SUN">日</th><th abbr="MON">月</th><th abbr="TUH">火</th><th abbr="WED">水</th><th abbr="THU">木</th><th abbr="FRY">金</th><th abbr="SAT">土</th>
＿＿＿＿＿</tr>
＿＿＿＿＿<tr>
＿＿＿＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td><td>1</td>
＿＿＿＿＿</tr>
＿＿＿＿＿<tr>
＿＿＿＿＿＿<td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
＿＿＿＿＿</tr>
＿＿＿＿＿<tr>
＿＿＿＿＿＿<td>9</td><td class="holiday">10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
＿＿＿＿＿</tr>
＿＿＿＿＿<tr>
＿＿＿＿＿＿<td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td>
＿＿＿＿＿</tr>
＿＿＿＿＿<tr>
＿＿＿＿＿＿<td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td>
＿＿＿＿＿</tr>
＿＿＿＿＿<tr>
＿＿＿＿＿＿<td>30</td><td>31</td><td></td><td></td><td></td><td></td><td></td>
＿＿＿＿＿</tr>
＿＿＿＿</tbody>
＿＿＿</table>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951さん、またまた丁寧に教えていただきありがとうございます。
サンプルまで教えていただき助かります

CSS使うときは、HTMLには文書構造しか書いていけないのですね。
勉強になります。

とりあえず時間がないので、htmlを以下へ変更して対応していますが、来月ひと段落したら、また読み返します。
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#666666" width="150" style="table-layout : fixed;">横幅が小さくなり、とりあえずこれで一旦アップロードできそうです。

ご指摘通り、CSSの使い方自体、まだ初心者で、勉強の余地があります。
一から勉強しなおして、ORAKU1951さんのアドバイスを参考に修正したいと思います。

また質問・相談させていただくかもしれませんが、宜しくお願いいたします。今回はひとまず、有難うございました。

通報する
お礼日時：2016/09/21 02:09

No.3

  • 回答者： ORUKA1951
  • 回答日時：

相も変わらず、ビルダーは酷い!!ですね。


Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
でチェックしたら泣きたくなるでしょう。
　ホームページ・ビルダー - Wikipedia( https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC … )
　個人ならともかく商用サイトには使わない。

CSS使うときは、HTMLには文書構造しか書いてはなりません。
　構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　今から17年前の勧告時から・・

<div class="aside" id="shopinfo">
　<table border="1" summary="営業カレンダー">
　　<caption>営業日カレンダー</caption>
　　<tbody>
　　　<tr>
　　　　<td colspan="7">2016年10月</td></tr>
　　　<tr>
　　　　<td>日</td><td>月</td><td>火</td><td>水</td><td>木</td><td>金</td><td>土</td>
　　　</tr>
・・・【中略】・・・
　　</tbody>
　</table>
</div>
に対して
div.aside{
position:absolute;top:0;right:0;width:150px;height:100%}
div.aside table[summary="営業カレンダー"]{width:100%;}
だけで済む話です。

★ 幅はwidthは、デフォルとやではautoです。
★ 幅は抱合親ブロックを基準にしましょう。
　その場合、基準となるのはposition の値が　static以外の直近の上位のブロックになります。
　すなわち、absolute,relative,fixed

サンプルは次回
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951さん、ご丁寧にありがとうございます！

通報する
お礼日時：2016/09/21 02:09

No.2

  • 回答者： daaa-
  • 回答日時：

その悩み分かります。

なんとか解決したような気がしますが、忘れました。

すみません。下のリンクが役に立つと思います。


https://www.google.co.jp/webhp?sourceid=chrome-i …
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速のアドバイス有難うございました。

リンク先で調べたところ、style="table-layout : fixed;"　がキーワードの様だったので、
htmlファイルを以下へ変更しました。　
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#666666" width="150" style="table-layout : fixed;">
横幅が小さくなり、とりあえずこれで一旦アップロードできそうです。

気になる点としては、ホームページビルダーの編集画面では横幅が変わらず、プレビュー画面で小さくなります。

更に勉強の余地がありそうなので、また行き詰ったら投稿させていただきます。

煮詰まっていたので、助かりました。ありがとうございました。

通報する
お礼日時：2016/09/18 12:11

No.1

  • 回答者： pikopa
  • 回答日時：

一概にいえませんが、ボーダーやマージンも計算にいれてないと


狂います。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報