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

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

ただいまの
回答率

87.80%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,209

score 12

 前提・実現したいこと

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

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

<!doctype html>
<html lang="jp">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- mystyle CSS -->
    <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>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
.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>
<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>
//
//    カレンダービュー(1ヶ月)
//
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);            // 「1日(ついたち)」を指定
    seq = 0;                    // 0なら前月(空白)、1なら当月、2なら翌月(空白)
    tmonth = theday.getMonth();    // 当月の月を控える
    wday = theday.getDay();        // 1日(ついたち)の曜日を控える
    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++)    // 1週間ブロックのループ。長くても6週間
        {
        ih += '<tr>';
        for (i = 0;i < 7;i++)    // 1週間内部のループ。日曜先頭決め打ちになってる。
            {
            if ((seq == 0) && (wday == i))
                {
                seq = 1;    // 曜日が前月から当月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);    // 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>
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;
    }
//
//    カレンダービュー(1ヶ月)
//
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);            // 「1日(ついたち)」を指定
    seq = 0;                    // 0なら前月(空白)、1なら当月、2なら翌月(空白)
    tmonth = theday.getMonth();    // 当月の月を控える
    wday = theday.getDay();        // 1日(ついたち)の曜日を控える
    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++)    // 1週間ブロックのループ。長くても6週間
        {
        ih += '<tr>';
        for (i = 0;i < 7;i++)    // 1週間内部のループ。日曜先頭決め打ちになってる。
            {
            if ((seq == 0) && (wday == i))
                {
                seq = 1;    // 曜日が前月から当月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);    // 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);
*/

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

tbody{
    width: 100% !important;
    /* display: block;*/
    overflow: scroll;
    padding: 8px 5px 5px 5px;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/16 14:13

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

    キャンセル

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

  • ただいまの回答率 87.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る