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

如果您希望div包含表格，可以使用overflow: auto。这使得div可以滚动。

但如果您不希望它可滚动，请改用display: table。

Answer 2

在CSS中添加：

td input {
    width: 90%;
    margin: 0 auto;
}

Answer 3

在代码中添加以下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

Answer 4

您必须将文本字段大小指定为百分比删除表头固定宽度。

CSS

input{width:100%;}

HTML

<div style="background-color:#ccc;padding:5px">
 <table >
<thead>
  <tr >
    <th >sunday</th>
    <th >monday</th>
    <th >tuesday</th>
    <th >wed</th>
    <th >thu</th>
    <th>fri</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>111</td>
    <td ><input value="" type="text" name="" /></td>
    <td ><input value="" type="text" name="" /></td>
    <td ><input value="" type="text" name="" /></td>
    <td ><input value="" type="text" name="" /></td>
    <td ><input value="" type="text" name="" /></td>
  </tr>
</tbody>
</table>
</div>

工作小提琴http://jsfiddle.net/G5y3T/1/

Answer 5

您应将div样式设置为display:inline-block;

Here you can see a demo

您还应该使用extern css文件而不是内联样式。当你改变某些东西时，很多效率。

表格对齐根据div大小

5 个答案: