table 给第二行的tr中的td设置宽度不起作用？

Question

<table border="1" width="100%">
  <tr>
    <td width="70%">January</td>
    <td width="10%">$100</td>
    <td width="20%" rowspan="2">$100</td>
  </tr>
  <tr>
    <td width="30%">February</td>
    <td width="50%">$80</td>
  </tr>
</table>
<style>table{border-collapse: collapse;border-spacing: 0;}</style>

https://jsfiddle.net/qq97mh3b/ demo在这
为什么给第二行td设置的width没起作用，还是按第一行的width来定的呢？
--------------------- 分割 ------------------------------------------------

谢谢各位的帮助，因为要做一个自适应屏幕垂直居中的展示效果（背景图和展示的内容也要高度也随屏幕变化），我能想到的唯一方法就是表格居中，但是坑的是第二行第一个还比第一行的多一点，不知道还有什么更好实现方法？

Answer 1

你需要这样写

January		$100	$100
February	$80

<table border="1" width="100%">
<tr>
    <td colspan="2">January</td>
    <td width="10%">$100</td>
    <td width="20%" rowspan="2">$100</td>
  </tr>
  <tr>
    <td width="30%">February</td>
    <td colspan="2">$80</td>
  </tr>
</table>

Answer 2

感谢邀请。
可是你为什么要做这样的需求呢？td是表格属性，它的宽度只能跟随第一行td的宽度变化。
如果你一定要给它个宽度的话只能改变它的display属性，但即便如此，它看上去依然会跟第一行保持对等，如图：

还有一个方法，第二行两个td合并，然后再插入一行两列的表格，按比例分配宽度

如果题主找到更好的解决方法，还烦请不吝赐教。

Answer 3

简单的说就是，你的html代码不标准
在table里面一般给thead里面的td设置宽度；如果不设置，td会根据内容自动适应宽度，前提是给table设置一个宽度。
单元格合同其实就是colspan、rowspan这两个属性，一定要会用，网上搜索一下相关代码一大堆的。
colspan ： 占用多少列； rowspan： 占用都少横

你的代码没问题，只是你这个要求很特别，这种形式不一定非要table，ul、li同样是可以实现

Answer 4

这种布局不建议使用table，使用列表、div，都可以实现，而且比table要灵活很多。