表是布萊恩失控格

這裏是代碼

<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>

我的問題是表越來越失控格

我試着使用但它似乎不起作用。

我的錯誤在哪裏？

感謝您的幫助。

來源

2017-07-08 Sukhomlin Eugene

這看起來像是簡單的溢出。你可以從'div'和'table'中移除'width：80％;'或移除'white-space：nowrap;'。問題是你的內容不僅僅是寬度。你想如何處理？請在您的問題中指定所需的行爲。 –

表格單元格的內容推動表格的寬度，這就是爲什麼它不能服從你設置的寬度。您可以輕鬆地在這個例子中與日字體大小打看到：

#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>

解決方法：調整內容或你的造型所以它會適合你的桌子。

來源

2017-07-08 12:51:41

是的。你是對的。謝謝 –

表是布萊恩失控格

回答

相關問題