js native table table cell layout and other issues

js native table form colspan, rowspan merged cell layout problem

method 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. Between each row, the width standard setting of the merged cell should correspond, otherwise it will be stretched;
2. If a row is divided into 15 parts, then the added value of the colspan<tr> </tr> in the label must be 15;
3. It is best to set a line in advance as a standard, divide the width of each part, and then customize the merged cell layout according to the above standard;
4. If the width is not set properly, the width will be allocated according to the content size;

Method 2

A little-known property of CSS2.1, table-layout: auto. The default value is auto, which will be automatically laid out, but changed to table-layout: fixedmake table fixing more controllable, but you need to specify a width for the table when using it.