常連

# 前提・実現したいこと
Bootstrapで作った``<div>``の中に``<table>``で囲ったカレンダーを配置した際、
幅が親要素の``<div>``の幅に合わされず、狭くなってしまいます。
親要素の幅に合わせてカレンダーを表示させたいです。
今の状態が、以下の画像になります。
赤枠で囲ったカレンダーのような表示をいましていますが、
青枠の余白の部分まで広げたいです。
![イメージ説明](9902a1290731a520df61648939f2af55.png)


以下が表示させたいindex.html。

```html
<!doctype html>
<html lang="jp">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="calendar.css">
    <title>practice</title>
  </head>
  <body>
    <section class="container-boxfrmCalendar item">
        <div class="section-titile clearfix item">
            <div class="contentTitle">カレンダー</div>
        </div>
        <div class="container-box-inner">        
            <div id="koko"></div>
        </div>
    </section>
    
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <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>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	<script src="calendar.js"></script>
    <script>

        dt = new Date();
        p =
            {
            "date": dt.toDateString(),
            "dummy":0
            }
        calendar_view(document.getElementById("koko"),p);

    </script>
  </body>
</html>
```

```css
.container-box{
    margin-top: 20px;
}
.frmCalendar tbody{
    height: 280px;
}
tbody{
    width: 100% !important;
    display: block;
    overflow: scroll;
    padding: 8px 5px 5px 5px;
}
.container-box-inner{
    width: 100%;
    border: 3px solid #F781F3;
    width: 100%;
    box-sizing: border-box;
}
.container-box-inner tr td{
    padding: 2px;
}
.section-titile{
    font-size: 1.0rem;
    background-color: #F781F3;
    margin-bottom: 0px;
    padding: 3px 0px 3px 6px;
    font-weight: normal;
    border: 1px solid #F781F3;
}
.contentTitle{
    margin-right: 10px;
}
```
続きまして、
以下が元となるカレンダーのコードになります。
```html
<html>
<head>
</head>
<body>
<div id="cal" style="width: 400px; height:400px"></div>


<style>
*
	{
	margin: 0px;
	padding: 0px;
	}
div.cal_title
	{
	text-align: center;
	font-weight: bold;
	}
table.cal_main
	{
	width: 100%;
	border-collapse: collapse;
	}
table.cal_main th
	{
	width: 14%;
	padding-right: 4px;
	text-align: center;
	font-weight: bold;
	border-bottom: solid 2px #ccc;
	}
table.cal_main td
	{
	width: 14%;
	height: 50px;
	padding-top: 4px;
	padding-right: 4px;
	vertical-align: top;
	border-bottom: solid 1px #ccc;
	}
div.cal_day
	{
	width: 100%;
	text-align: right;
	font-size: 16px;
	line-height: 16px;
	}
td.cal_today
	{
	background-color: #ffc;
	}
td.cal_holiday
	{
	background-color: #fdd;
	}
td.cal_weekday
	{
	background-color: #fff;
	}
</style>
<script>
//
//	カレンダービュー（１ヶ月）
//
function calendar_view(elmid,prms)
	{
	ih = "";
	wdaystr = ["日","月","火","水","木","金","土"];
	// カレンダー月の表示
	today = new Date(prms["date"]);
	title_s = today.getFullYear() + "年" + (today.getMonth()+1) + "月";
	ih += '<div class="cal_title">' + title_s + '</div>';

	// 月初を求める
	theday = new Date(today);	// まず今日で生成して
	theday.setDate(1);			// 「１日（ついたち）」を指定
	seq = 0;					// ０なら前月（空白）、１なら当月、２なら翌月（空白）
	tmonth = theday.getMonth();	// 当月の月を控える
	wday = theday.getDay();		// １日（ついたち）の曜日を控える
	tdate = today.getDate();	// 今日の日付を控える

	// カレンダーの描画
	ih += '<table class="cal_main">';
	ih += '<tr>';
	for (i = 0;i < 7;i++)	// 曜日名ヘッダ
		{
		ih += '<th>';
		ih += wdaystr[i];
		ih += '</th>';
		}
	ih += '</tr>';

	for (j = 0;j < 6;j++)	// １週間ブロックのループ。長くても６週間
		{
		ih += '<tr>';
		for (i = 0;i < 7;i++)	// １週間内部のループ。日曜先頭決め打ちになってる。
			{
			if ((seq == 0) && (wday == i))
				{
				seq = 1;	// 曜日が前月から当月１日（ついたち）に到達した
				}
			if (theday.getDate() == tdate)	// このセルが今日ならスタイルシートを変える
				{
				cls = 'cal_today';
				}
			else if (i == 0 || i == 6)	// 日曜または土曜なら、スタイルシートを変える
				{
				cls = 'cal_holiday';
				}
			else
				{
				cls = 'cal_weekday';
				}
			ih += '<td class="'+cls+'">';
			if (seq == 1)	// 当月内
				{
				ih += '<div class="cal_day">'
				ih += theday.getDate();
				ih += '</div>';
				}
			ih += '</td>';
			if (seq == 1)
				{
				theday.setDate(theday.getDate()+1);	// １日（いちにち）を加算
			 	if (theday.getMonth() != tmonth)
			 		{
					seq = 2;	// 曜日が翌月に到達
					}
				}
			}
		ih += '</tr>';
		if (seq == 2) break;
		}
	ih += "</table";

	// 目的DIVの内部に代入
	elmid.innerHTML = ih;
	}


dt = new Date();

p =
	{
	"date": dt.toDateString(),
	"dummy":0
	}
calendar_view(document.getElementById("cal"),p);

</script>
</body>
</html>
```
```css
div.cal_title
	{
	text-align: center;
	font-weight: bold;
	}
table.cal_main
	{
	width: 100%;
	border-collapse: collapse;
	}
table.cal_main th
	{
	width: 14%;
	padding-right: 4px;
	text-align: center;
	font-weight: bold;
	border-bottom: solid 2px #ccc;
	}
table.cal_main td
	{
	width: 14%;
	height: 50px;
	padding-top: 4px;
	padding-right: 4px;
	vertical-align: top;
	border-bottom: solid 1px #ccc;
	}
div.cal_day
	{
	width: 100%;
	text-align: right;
	font-size: 16px;
	line-height: 16px;
	}
td.cal_today
	{
	background-color: #ffc;
	}
td.cal_holiday
	{
	background-color: #fdd;
	}
td.cal_weekday
	{
	background-color: #fff;
	}

```
```js
//
//	カレンダービュー（１ヶ月）
//
function calendar_view(elmid,prms)
	{
	ih = "";
	wdaystr = ["日","月","火","水","木","金","土"];
	// カレンダー月の表示
	today = new Date(prms["date"]);
	title_s = today.getFullYear() + "年" + (today.getMonth()+1) + "月";
	ih += '<div class="cal_title">' + title_s + '</div>';

	// 月初を求める
	theday = new Date(today);	// まず今日で生成して
	theday.setDate(1);			// 「１日（ついたち）」を指定
	seq = 0;					// ０なら前月（空白）、１なら当月、２なら翌月（空白）
	tmonth = theday.getMonth();	// 当月の月を控える
	wday = theday.getDay();		// １日（ついたち）の曜日を控える
	tdate = today.getDate();	// 今日の日付を控える

	// カレンダーの描画
	ih += '<table class="cal_main">';
	ih += '<tr>';
	for (i = 0;i < 7;i++)	// 曜日名ヘッダ
		{
		ih += '<th>';
		ih += wdaystr[i];
		ih += '</th>';
		}
	ih += '</tr>';

	for (j = 0;j < 6;j++)	// １週間ブロックのループ。長くても６週間
		{
		ih += '<tr>';
		for (i = 0;i < 7;i++)	// １週間内部のループ。日曜先頭決め打ちになってる。
			{
			if ((seq == 0) && (wday == i))
				{
				seq = 1;	// 曜日が前月から当月１日（ついたち）に到達した
				}
			if (theday.getDate() == tdate)	// このセルが今日ならスタイルシートを変える
				{
				cls = 'cal_today';
				}
			else if (i == 0 || i == 6)	// 日曜または土曜なら、スタイルシートを変える
				{
				cls = 'cal_holiday';
				}
			else
				{
				cls = 'cal_weekday';
				}
			ih += '<td class="'+cls+'">';
			if (seq == 1)	// 当月内
				{
				ih += '<div class="cal_day">'
				ih += theday.getDate();
				ih += '</div>';
				}
			ih += '</td>';
			if (seq == 1)
				{
				theday.setDate(theday.getDate()+1);	// １日（いちにち）を加算
			 	if (theday.getMonth() != tmonth)
			 		{
					seq = 2;	// 曜日が翌月に到達
					}
				}
			}
		ih += '</tr>';
		if (seq == 2) break;
		}
	ih += "</table";

	// 目的DIVの内部に代入
	elmid.innerHTML = ih;
	}

/*
つかいかた
dt = new Date();

p =
	{
	"date": dt.toDateString(),
	"dummy":0
	}
calendar_view(document.getElementById("calendar"),p);
*/

```

どうかご教授いただけないでしょうか。
何卒宜しくお願い致します。

	@@ -1,1 +1,1 @@
1	- ~~ボックス~~内の幅にカレンダーが合わない
1	+ HTMLのdiv内の幅にカレンダーが合わない

質問編集履歴