0

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: introducir la descripción de la imagen aquí

Como de ve mi tabla: introducir la descripción de la imagen aquí 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>

1 respuesta 1

1

Con este otro a ver si te funciona mejor:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table {
            width: 100%;
            height: 100%;
            text-align: center;
            border: solid black 1px;
            column-span: none;
        }

        tr{
            width: 100%;
            height: 50px;
            text-align: center;
            border: solid black 1px;
        }

        td{            
            text-align: center;
            border: solid black 1px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th colspan="2">Existing System</th>
        </tr>
        <tr style="width: 100%" >
            <td style="width: 50%;">Number of Pumps</td>
            <td style="width: 50%;"># 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>

        <table>
        <tr>
            <td style="width: 30%;"></td>
            <td style="width: 17.5%;">EXISTING</td>
            <td style="width: 17.5%;">PROPOSED</td>
            <td style="width: 17.5%;">SAVINGS</td>
            <td style="width: 17.5%;"></td>
        </tr>
        <tr>
            <td style="width: 30%;">Energy Consumption (kWh)</td>
            <td style="width: 17.5%;">Existing System cons</td>
            <td style="width: 17.5%;">Grundfos Pump cons</td>
            <td style="width: 17.5%;">Energy savings kwh</td>
            <td style="width: 17.5%;"></td>
        </tr> 
    </table> 

    </table>
</body>
</html>
2
  • Un millón de gracias por tu tiempo bro, con este si me funciona 😎
    – Tony
    Commented el 12 ago. 2022 a las 11:11
  • @Tony de nada, cualquier cosa me comentas!
    – DAVID
    Commented el 12 ago. 2022 a las 11:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.