можно ли перевезти атрибут colspan в css или задать подобный этому стиль

Question

html{
    box-sizing: border-box;
}

*{
    box-sizing: inherit;
}

body{
    display: flex;
    justify-content: center;
    background-color: #CA7072;
    margin: 0;
    padding: 0;
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: solid 0.000001vh black;
    margin-top: 10vh;
    padding: 2vh;
    border-radius: 3vh;
}

.calculator{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.display{
    display: inline-flex;
    width: 25vw;
    height: 10vh;
    margin: 0.5vh 1vw;
    border:solid 0.000001vh black;
}

.section{
    width: 30vw;
    height: 12vh;
}

.section td{
    margin-left: 1vw;
}

.section td:first-child{
    margin: 0;
}

td{
    display: inline-block;
    font-size: 6vh;
    font-weight: bold;
    text-align: center;
    border: solid 0.000001vh black;
    width: 5.5vw;
    height: 11vh;
}


#equally{
    height: 20vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize-css.css">
    <link rel="stylesheet" href="css/main.css">
    <title>vazifa 1</title>
</head>
<body>
    <div class="container">
        <span class="display"></span>
        <table class="calculator">
            <tr class="section">
                <td id="Mc">MC</td>
                <td id="M+">M+</td>
                <td id="division">&divide</td>
                <td id="multiplication">&times</td>
            </tr>
            <tr class="section">
                <td id="seven">7</td>
                <td id="eight">8</td>
                <td id="nine">9</td>
                <td id="minus">&#8722</td>
            </tr>
            <tr class="section">
                <td id="four">4</td>
                <td id="five">5</td>
                <td id="six">6</td>
                <td id="plus">+</td>
            </tr>
            <tr class="section">
                <td id="one">1</td>
                <td id="two">2</td>
                <td id="three">3</td>
                <td rowspan="2" id="equally">=</td>
            </tr>
            <tr class="section">
                <td colspan="2" id="zero">0</td>
                <td id="dot">.</td>
            </tr>
        </table>
    </div>
</body>
</html>

Как задать стиль в css похожий на colspan?

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>html{
        box-sizing: border-box;
    }
    
    *{
        box-sizing: inherit;
    }
    
    body{
        display: flex;
        justify-content: center;
        background-color: #CA7072;
        margin: 0;
        padding: 0;
    }
    
    .container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: solid 0.000001vh black;
        margin-top: 10vh;
        padding: 2vh;
        border-radius: 3vh;
    }
    
    .calculator{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .display{
        display: inline-flex;
        width: 25vw;
        height: 10vh;
        margin: 0.5vh 1vw;
        border:solid 0.000001vh black;
    }
    
    .section{
        width: 30vw;
        height: 12vh;
    }
    
    .section td{
        margin-left: 1vw;
    }
    
    .section td:first-child{
        margin: 0;
    }
    
    td{
        display: inline-block;
        font-size: 6vh;
        font-weight: bold;
        text-align: center;
        border: solid 0.000001vh black;
        width: 5.5vw;
        height: 11vh;
    }
    #equally{
        height: 20vh;
    }</style>
        <title>vaz</title>
    </head>
    <body>
        <div class="container">
            <span class="display"></span>
            <table class="calculator">
                <tr class="section">
                    <td id="Mc">MC</td>
                    <td id="M+">M+</td>
                    <td id="division">&divide</td>
                    <td id="multiplication">&times</td>
                </tr>
                <tr class="section">
                    <td id="seven">7</td>
                    <td id="eight">8</td>
                    <td id="nine">9</td>
                    <td id="minus">&#8722</td>
                </tr>
                <tr class="section">
                    <td id="four">4</td>
                    <td id="five">5</td>
                    <td id="six">6</td>
                    <td id="plus">+</td>
                </tr>
                <tr class="section">
                    <td id="one">1</td>
                    <td id="two">2</td>
                    <td id="three">3</td>
                    <td rowspan="2" id="equally">=</td>
                </tr>
                <tr class="section">
                    <td colspan="2" id="zero">0</td>
                    <td id="dot">.</td>
                </tr>
            </table>
        </div>
    </body>
    </html>

БЛОГ НА HUSL

можно ли перевезти атрибут colspan в css или задать подобный этому стиль

Ответы (0 шт):