css - 根据 div 大小对齐表格

Question

我在 div 中有表格，如果我改变窗口大小，表格就会从 div 中出来。请帮我。提前致谢。下面是我的代码

<div style="height:auto">
 <table  width="100%" style="width: 100%;">
<thead>
  <tr >
    <th  width="16.5%">sunday</th>
    <th width="16.5%">monday</th>
    <th width="16.5%">tuesday</th>
    <th width="16.5%">wed</th>
    <th width="16.5%">thu</th>
    <th width="16.5%">fri</th>
  </tr>
</thead>
<tbody>
  <tr  >
    <td>111</td>
    <td ><input value="" type="" name="" /></td>
    <td ><input value="" type="" name="" /></td>
    <td ><input value="" type="" name="" /></td>
    <td ><input value="" type="" name="" /></td>
    <td ><input value="" type="" name="" /></td>
  </tr>
</tbody>
</table>
     </div>

Answer 1

在你的代码中添加以下css

div{
    width: 500px; /* you can apply any width to this div */
}

table{
    table-layout:fixed;
    border-spacing: 0;
    border-collapse: separate;
}
table td{
    padding: 5px;
}

input{
    width: 100%;
    box-sizing: border-box;
}

检查这个Demo