怎么让div根据外部td自动放大缩小。

小春yeah 2014-12-03 10:33:24

<table>
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td colspan=20><div> 2006年1月1日 ~ 2007年1月1日</div></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>xialala</td>
<td>value1</td>
<td>value2</td>
<td>value3</td>
<td>value4</td>
<td>value5</td>
<td>value6</td>
<td>value7</td>
<td>value8</td>
<td>value9</td>
<td>value10</td>
<td>value11</td>
<td>value12</td>
<td>value13</td>
<td>value14</td>
<td>value15</td>
<td>value16</td>
<td>value17</td>
<td>value18</td>
<td>value19</td>
<td>value20</td>
</tr>
</tbody>
</table>

可以看到有很多td，第一个id，和第二个name不用管，我只是做一个假设，我搞不定的是后面的20个td。

那20个value的td宽度是100px，并且网页缩小的时候它会一个一个消失。我主要的问题就是网页缩小到最后，20个保存value的td宽度会发生变化。

我调试发现，网页缩小的时候，td会正常消失，但是网页缩小到
<td colspan=20><div> 2006年1月1日 ~ 2007年1月1日</div></td>
这个标签页显示不下的时候，整个table就不会再缩小，但是网页缩小的时候我的td仍旧在消失。

于是td消失了，但是table却没有缩小，被td colspan=20给撑大了，因为这个div里头有文字，虽然文字会自动换行，但是自动换行也不是一个一个字母换行的，
所以我想让td colspan=20这个元素不被div里头的文字影响到，我想让这个div里头的文字不还行，并且会隐藏。但是我不知道怎么让这个div随着外面的td自动调整宽度。

不换行和自动隐藏的代码是white-space:nowrap;overflow:hidden
<div style="white-space:nowrap;overflow:hidden">11111111111111111111</div>
如果再给div设置宽度的话，里面的文字就会被隐藏掉。

但是我这个项目，div被设置了80，被我删除之后又被外面的样式设置了120，

我的bug就是网页缩小的时候，td会自动消失，但是标题因为文字比较多，所以标题的div没有缩小，导致整个table被撑大。
我的table没有缩小，但是td消失了，所以td的宽度就不再是80了。

所以我想实现的效果是，让那个标题td内的div，可以不受内部文字影响，因为网页缩小而自动缩小。这样我的数据td就不会被撑大。
文字不还行，显示不下的文字就消失不现实。

我对css一点都不懂，求哥哥姐姐帮个忙。

...全文