强制表格的列宽始终固定，而不考虑列数增加吗？

Question

我有3列的表格行。当我基于一些API调用填充表数据时，我得到了更多的列。因此，每当列数增加时，行的宽度就会增加。

  

如何固定桌子的宽度？

Answer 1

万能拳：您的列应具有相同类别的内容，因此“土地面积”应始终位于同一列上，并且第一行（9.1至9.6）应位于另一张表上。

因此，您可以在CSS中定义表格宽度，并且每当列数增加或增加每行最后一个单元格的“ colspan”属性时，都应为每行动态添加新列（在同一位置）。

我的建议是表＃3：

/* CSS */
table { width:100% }
th { background:#000; color:#fff }
td { border:1px solid; }

<table>
  <tr>
    <th colspan='3'>Group: Socio-Economic Profile</th>
  </tr>
  <tr>
    <td>9.1</td>
    <td>Name of the interviewer:</td>
    <td>Sharif</td>
  </tr>
  <tr>
    <td>9.1</td>
    <td>AP number:</td>
    <td>End</td>
  </tr>
</table>


<br><br>Option 1 - Multiple tables (one for each group)
<table>
  <tr>
    <th colspan='5'>Group: Household Land</th>
  </tr>
  <tr>
    <th>Title</th>
    <th>Present price</th>
    <th>Size</th>
    <th>Whou used the land?</th>
  </tr>
  <tr>
    <td>Inerithance</td>
    <td>150,000</td>
    <td>16.0</td>
    <td>Others</td>
  </tr>
</table>
<table>
  <tr>
    <th colspan='6'>Group: Agricultural Land</th>
  </tr>
  <tr>
    <th>Title</th>
    <th>Present price</th>
    <th>Size</th>
    <th>Whou used the land?</th>
    <th>Do you have any agricultural land?</th>
  </tr>
  <tr>
    <td>Inerithance</td>
    <td>70,000</td>
    <td>58.0</td>
    <td>Own</td>
    <td>Yes</td>
  </tr>
</table>


<br><br>Option 2 - Single table, but repeat questions 
<table>
  <tr>
    <th colspan='6'>Group: Household Land</th>
  </tr>
  <tr>
    <th>Title</th>
    <th>Present price</th>
    <th>Size</th>
    <th colspan='2'>Whou used the land?</th>
  </tr>
  <tr>
    <td>Inerithance</td>
    <td>150,000</td>
    <td>16.0</td>
    <td colspan='2'>Others</td>
  </tr>
  <tr>
    <th colspan='6'>Group: Agricultural Land</th>
  </tr>
  <tr>
    <th>Title</th>
    <th>Present price</th>
    <th>Size</th>
    <th>Whou used the land?</th>
    <th>Do you have any agricultural land?</th>
  </tr>
  <tr>
    <td>Inerithance</td>
    <td>70,000</td>
    <td>58.0</td>
    <td>Own</td>
    <td>Yes</td>
  </tr>
</table>
<br>



Option 3 - Same table, groups by columns
<table>
  <tr>
    <th>Group</th>
    <th>Land Title</th>
    <th>Land Present price</th>
    <th>Land Size</th>
    <th>Whou used the land?</th>
    <th>Do you have any land (of your group)?</th>
  </tr>
  <tr>
    <td>Household land</td>
    <td>Inerithance</td>
    <td>150,000</td>
    <td>16.0</td>
    <td>Others</td>
    <td>---</td>
  </tr>
  <tr>
    <td>Agricultural land</td>
    <td>Inerithance</td>
    <td>70,000</td>
    <td>58.0</td>
    <td>Own</td>
    <td>Yes</td>
  </tr>
</table>