前提・実現したいこと

Bootstrapで作った<div>の中に<table>で囲ったカレンダーを配置した際、
幅が親要素の<div>の幅に合わされず、狭くなってしまいます。
親要素の幅に合わせてカレンダーを表示させたいです。
今の状態が、以下の画像になります。
赤枠で囲ったカレンダーのような表示をいましていますが、
青枠の余白の部分まで広げたいです。

以下が表示させたいindex.html。

html
1<!doctype html>
2<html lang="jp">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <!-- mystyle CSS -->
8    <link rel="stylesheet" href="css/style.css">
9	<link rel="stylesheet" href="calendar.css">
10    <title>practice</title>
11  </head>
12  <body>
13    <section class="container-boxfrmCalendar item">
14        <div class="section-titile clearfix item">
15            <div class="contentTitle">カレンダー</div>
16        </div>
17        <div class="container-box-inner">        
18            <div id="koko"></div>
19        </div>
20    </section>
21    <!-- Optional JavaScript -->
22    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
23    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
24    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
25    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
26	<script src="calendar.js"></script>
27    <script>
28
29        dt = new Date();
30        p =
31            {
32            "date": dt.toDateString(),
33            "dummy":0
34            }
35        calendar_view(document.getElementById("koko"),p);
36
37    </script>
38  </body>
39</html>

css
1.container-box{
2    margin-top: 20px;
3}
4.frmCalendar tbody{
5    height: 280px;
6}
7tbody{
8    width: 100% !important;
9    display: block;
10    overflow: scroll;
11    padding: 8px 5px 5px 5px;
12}
13.container-box-inner{
14    width: 100%;
15    border: 3px solid #F781F3;
16    width: 100%;
17    box-sizing: border-box;
18}
19.container-box-inner tr td{
20    padding: 2px;
21}
22.section-titile{
23    font-size: 1.0rem;
24    background-color: #F781F3;
25    margin-bottom: 0px;
26    padding: 3px 0px 3px 6px;
27    font-weight: normal;
28    border: 1px solid #F781F3;
29}
30.contentTitle{
31    margin-right: 10px;
32}

続きまして、
以下が元となるカレンダーのコードになります。

html
1<html>
2<head>
3</head>
4<body>
5<div id="cal" style="width: 400px; height:400px"></div>
6
7
8<style>
9*
10	{
11	margin: 0px;
12	padding: 0px;
13	}
14div.cal_title
15	{
16	text-align: center;
17	font-weight: bold;
18	}
19table.cal_main
20	{
21	width: 100%;
22	border-collapse: collapse;
23	}
24table.cal_main th
25	{
26	width: 14%;
27	padding-right: 4px;
28	text-align: center;
29	font-weight: bold;
30	border-bottom: solid 2px #ccc;
31	}
32table.cal_main td
33	{
34	width: 14%;
35	height: 50px;
36	padding-top: 4px;
37	padding-right: 4px;
38	vertical-align: top;
39	border-bottom: solid 1px #ccc;
40	}
41div.cal_day
42	{
43	width: 100%;
44	text-align: right;
45	font-size: 16px;
46	line-height: 16px;
47	}
48td.cal_today
49	{
50	background-color: #ffc;
51	}
52td.cal_holiday
53	{
54	background-color: #fdd;
55	}
56td.cal_weekday
57	{
58	background-color: #fff;
59	}
60</style>
61<script>
62//
63//	カレンダービュー（１ヶ月）
64//
65function calendar_view(elmid,prms)
66	{
67	ih = "";
68	wdaystr = ["日","月","火","水","木","金","土"];
69	// カレンダー月の表示
70	today = new Date(prms["date"]);
71	title_s = today.getFullYear() + "年" + (today.getMonth()+1) + "月";
72	ih += '<div class="cal_title">' + title_s + '</div>';
73
74	// 月初を求める
75	theday = new Date(today);	// まず今日で生成して
76	theday.setDate(1);			// 「１日（ついたち）」を指定
77	seq = 0;					// ０なら前月（空白）、１なら当月、２なら翌月（空白）
78	tmonth = theday.getMonth();	// 当月の月を控える
79	wday = theday.getDay();		// １日（ついたち）の曜日を控える
80	tdate = today.getDate();	// 今日の日付を控える
81
82	// カレンダーの描画
83	ih += '<table class="cal_main">';
84	ih += '<tr>';
85	for (i = 0;i < 7;i++)	// 曜日名ヘッダ
86		{
87		ih += '<th>';
88		ih += wdaystr[i];
89		ih += '</th>';
90		}
91	ih += '</tr>';
92
93	for (j = 0;j < 6;j++)	// １週間ブロックのループ。長くても６週間
94		{
95		ih += '<tr>';
96		for (i = 0;i < 7;i++)	// １週間内部のループ。日曜先頭決め打ちになってる。
97			{
98			if ((seq == 0) && (wday == i))
99				{
100				seq = 1;	// 曜日が前月から当月１日（ついたち）に到達した
101				}
102			if (theday.getDate() == tdate)	// このセルが今日ならスタイルシートを変える
103				{
104				cls = 'cal_today';
105				}
106			else if (i == 0 || i == 6)	// 日曜または土曜なら、スタイルシートを変える
107				{
108				cls = 'cal_holiday';
109				}
110			else
111				{
112				cls = 'cal_weekday';
113				}
114			ih += '<td class="'+cls+'">';
115			if (seq == 1)	// 当月内
116				{
117				ih += '<div class="cal_day">'
118				ih += theday.getDate();
119				ih += '</div>';
120				}
121			ih += '</td>';
122			if (seq == 1)
123				{
124				theday.setDate(theday.getDate()+1);	// １日（いちにち）を加算
125			 	if (theday.getMonth() != tmonth)
126			 		{
127					seq = 2;	// 曜日が翌月に到達
128					}
129				}
130			}
131		ih += '</tr>';
132		if (seq == 2) break;
133		}
134	ih += "</table";
135
136	// 目的DIVの内部に代入
137	elmid.innerHTML = ih;
138	}
139
140
141dt = new Date();
142
143p =
144	{
145	"date": dt.toDateString(),
146	"dummy":0
147	}
148calendar_view(document.getElementById("cal"),p);
149
150</script>
151</body>
152</html>

css
1div.cal_title
2	{
3	text-align: center;
4	font-weight: bold;
5	}
6table.cal_main
7	{
8	width: 100%;
9	border-collapse: collapse;
10	}
11table.cal_main th
12	{
13	width: 14%;
14	padding-right: 4px;
15	text-align: center;
16	font-weight: bold;
17	border-bottom: solid 2px #ccc;
18	}
19table.cal_main td
20	{
21	width: 14%;
22	height: 50px;
23	padding-top: 4px;
24	padding-right: 4px;
25	vertical-align: top;
26	border-bottom: solid 1px #ccc;
27	}
28div.cal_day
29	{
30	width: 100%;
31	text-align: right;
32	font-size: 16px;
33	line-height: 16px;
34	}
35td.cal_today
36	{
37	background-color: #ffc;
38	}
39td.cal_holiday
40	{
41	background-color: #fdd;
42	}
43td.cal_weekday
44	{
45	background-color: #fff;
46	}
47

js
1//
2//	カレンダービュー（１ヶ月）
3//
4function calendar_view(elmid,prms)
5	{
6	ih = "";
7	wdaystr = ["日","月","火","水","木","金","土"];
8	// カレンダー月の表示
9	today = new Date(prms["date"]);
10	title_s = today.getFullYear() + "年" + (today.getMonth()+1) + "月";
11	ih += '<div class="cal_title">' + title_s + '</div>';
12
13	// 月初を求める
14	theday = new Date(today);	// まず今日で生成して
15	theday.setDate(1);			// 「１日（ついたち）」を指定
16	seq = 0;					// ０なら前月（空白）、１なら当月、２なら翌月（空白）
17	tmonth = theday.getMonth();	// 当月の月を控える
18	wday = theday.getDay();		// １日（ついたち）の曜日を控える
19	tdate = today.getDate();	// 今日の日付を控える
20
21	// カレンダーの描画
22	ih += '<table class="cal_main">';
23	ih += '<tr>';
24	for (i = 0;i < 7;i++)	// 曜日名ヘッダ
25		{
26		ih += '<th>';
27		ih += wdaystr[i];
28		ih += '</th>';
29		}
30	ih += '</tr>';
31
32	for (j = 0;j < 6;j++)	// １週間ブロックのループ。長くても６週間
33		{
34		ih += '<tr>';
35		for (i = 0;i < 7;i++)	// １週間内部のループ。日曜先頭決め打ちになってる。
36			{
37			if ((seq == 0) && (wday == i))
38				{
39				seq = 1;	// 曜日が前月から当月１日（ついたち）に到達した
40				}
41			if (theday.getDate() == tdate)	// このセルが今日ならスタイルシートを変える
42				{
43				cls = 'cal_today';
44				}
45			else if (i == 0 || i == 6)	// 日曜または土曜なら、スタイルシートを変える
46				{
47				cls = 'cal_holiday';
48				}
49			else
50				{
51				cls = 'cal_weekday';
52				}
53			ih += '<td class="'+cls+'">';
54			if (seq == 1)	// 当月内
55				{
56				ih += '<div class="cal_day">'
57				ih += theday.getDate();
58				ih += '</div>';
59				}
60			ih += '</td>';
61			if (seq == 1)
62				{
63				theday.setDate(theday.getDate()+1);	// １日（いちにち）を加算
64			 	if (theday.getMonth() != tmonth)
65			 		{
66					seq = 2;	// 曜日が翌月に到達
67					}
68				}
69			}
70		ih += '</tr>';
71		if (seq == 2) break;
72		}
73	ih += "</table";
74
75	// 目的DIVの内部に代入
76	elmid.innerHTML = ih;
77	}
78
79/*
80つかいかた
81dt = new Date();
82
83p =
84	{
85	"date": dt.toDateString(),
86	"dummy":0
87	}
88calendar_view(document.getElementById("calendar"),p);
89*/
90

どうかご教授いただけないでしょうか。
何卒宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

すべてが期待通りかは不明ですが、下記のように tbody の display: block; をオフにすれば画面いっぱいに表示されるように見えます。

CSS
1tbody{
2    width: 100% !important;
3    /* display: block;*/
4    overflow: scroll;
5    padding: 8px 5px 5px 5px;
6}

投稿2018/11/12 06:57

ssasaki

総合スコア1167

keykon

2018/11/16 05:13

ありがとうございます、こちらご指摘通り、コードを修正したところ、希望しているレイアウトになりました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTMLのdiv内の幅にカレンダーが合わない

前提・実現したいこと

関連した質問