js原生table表格单元格布局等问题

js原生table表格colspan、rowspan合并单元格布局问题

方法1

 <tr>
      <td colspan="1" class="center" >11</td>
      <td colspan="1" class="detaildata"  >22</td>
      <td colspan="3" class="center">33</td>
      <td colspan="10" class="detaildata">44</td>
</tr>
<tr>
      <td colspan="2" class="center">55</td>
      <td colspan="5" class="detaildata" >66</td>
      <td colspan="2" class="center">77</td>
      <td colspan="6" class="detaildata" >88</td>
 </tr>

1. 各个行之间，合并单元格的宽度标准设置要相对应，否则会被撑开；
2. 若将一行分为15份，那么<tr> </tr>标签内的colspan加起来的值一定要为15；
3. 最好事先设置好一行作为标准，划分好每一份的宽度为多少，接下来按照上面的标准进行自定义合并单元格布局；
4. 宽度若是不设置好，会按照内容大小分配宽度；

方法2

CSS2.1鲜为人知的一个属性，table-layout: auto。默认值为auto，该值时会自动布局，但是改为table-layout: fixed，使表格固定更加可控，但使用时需要给表格指定宽度。