表は、私がここでテーブル</p> <p>でdiv要素を持って離れるのdiv

Question

をやっているコード

<div id="container" style="width: 100%; height: 700px;margin-top: 85px; white-space: nowrap;"> 
<div style="float: left;width: 80%; table-layout: fixed;"> 
    <table class="table" style="width: 80%;border-style: solid;border-color: #1d69b4;border-radius: 10px;border-collapse: separate"> 
     <tr> 
      <th style="font-size: 18px; text-align: center;"> 
       <b>Hours</b><b style="padding-left: 30px;"> Monday</b> 
      </th> 
      <th style="font-size: 20px; text-align: center;"> 
       <b>Hours</b><b style="padding-left: 30px;"> Tuesday</b> 
      </th> 
      <th style="font-size: 20px; text-align: center;"> 
       <b>Hours</b><b style="padding-left: 30px;"> Wednesday</b> 
      </th> 
      <th style="font-size: 20px; text-align: center;"> 
       <b>Hours</b><b style="padding-left: 30px;"> Thursday</b> 
      </th> 
      <th style="font-size: 20px; text-align: center;"> 
       <b>Hours</b><b style="padding-left: 30px;"> Friday</b> 
      </th> 
      <th style="font-size: 20px; text-align: center;"> 
       <b>Hours</b><b style="padding-left: 30px;"> Saturday</b> 
      </th> 
      <th style="font-size: 20px; text-align: center;"> 
       <b>Hours</b><b style="padding-left: 30px;"> Sunday</b> 
      </th> 
     </tr> 
     <tr> 

      </tr> 
    </table> 
</div> 

である私の問題は、私がしようとdiv要素

を離れる取得した表でありますを使用してくださいが、それは動作していないようです。

私の間違いはどこですか？

ありがとうございました。

Answer 1

テーブルセルの内容がテーブルの幅を押しているため、設定した幅に従うことができません。あなたは簡単にこの例では番目のフォントサイズで遊んで、これを見ることができます：

#container { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    height: 700px; 
 
    margin-top: 85px; 
 
} 
 

 
#container div { 
 
    border: 1px solid blue; 
 
    float: left; 
 
    width: 80%; 
 
} 
 

 
table { 
 
    border: 3px solid #1d69b4; 
 
    border-radius: 10px; 
 
    border-collapse: separate; 
 
    display: block; 
 
} 
 

 
th { 
 
    font-size: 12px; 
 
    text-align: center; 
 
    border: 1px solid green; 
 
} 
 

 
.pad-left { 
 
    padding-left: 30px; 
 
}

<div id="container"> 
 
    <div> 
 
    <table> 
 
     <tr> 
 
     <th>Hours Monday</th> 
 
     <th>Hours Tuesday</th> 
 
     <th>Hours Wednesday</th> 
 
     <th>Hours Thursday</th> 
 
     <th>Hours Friday</th> 
 
     <th>Hours Saturday</th> 
 
     <th>Hours Sunday</th> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

ソリューション：それはあなたのテーブルに収まるように、あなたのコンテンツや、あなたのスタイルを調整します。