Question

我有表格的div

这是代码

<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

我尝试使用table-layout: fixed;，但似乎无效。

我的错误在哪里？

感谢您的帮助。

Answer 1

表格单元格的内容是推动表格的宽度，这就是为什么它不能服从你设置的宽度。您可以通过在此示例中使用第th个字体大小轻松查看此内容：

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

解决方案：调整您的内容或样式，使其适合您的桌子。

表是goin outta div

1 个答案: