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

Answer 2

如果您希望div包含表格，則可以使用overflow: auto。這使得div可以滾動。

但是，如果您不希望它是可滾動的，請改爲使用display: table。

Answer 3

在CSS補充一點：

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

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文件，而不是內聯樣式。 很多當你改變某些東西時效率很高。