Estoy intentando replicar el comportamiento de esta tabla, pero de la manera en la que lo estoy haciendo la tabla se deforma, pues las rows se desequiparan como pueden ver en la foto, que puedo estar haciendo mal?
Comportamiento que quiero imitar:
Como de ve mi tabla: Aquí mi código de HTML:
<table style="width: 100%">
<tr>
<th colspan="2">Existing System</th>
</tr>
<tr style="width: 100%" >
<td style="width: 50%;">Number of Pumps</td>
<td># of Pumps</td>
</tr>
<tr>
<td>Design Water Flow Capacity (Name Plate)/td>
<td>Nameplate Flow</td>
</tr>
<tr>
<td>Estimated Building Flow Demand*</td>
<td>max flow</td>
</tr>
<tr>
<td>Design Pressure Boost (Name Plate)</td>
<td>Pump Head</td>
</tr>
<tr>
<td>Gauge Pressure (based on walkthrough, See Appendix C)</td>
<td>Measured Head</td>
</tr>
<tr>
<th colspan="2">Energy Saving Summary</th>
</tr>
<tr>
<td></td>
<td>EXISTING</td>
<td>PROPOSED</td>
<td>SAVINGS</td>
<td></td>
</tr>
<tr>
<td>Energy Consumption (kWh)</td>
<td>Existing System cons</td>
<td>Grundfos Pump cons</td>
<td>Energy savings kwh</td>
<td></td>
</tr>
</table>