I am using display: flex to collapse table columns into one column on smaller screens. However, I encounter the following issues:

Table Rows () Do Not Take Full Width:
When applying display: flex to elements, the table rows do not expand to fill the full width of their parent container. Instead, they only take up half the width.

Thus, the table is flushed to the right and I cannot find a way to center it.

table {
    width: 100%;
    border-collapse: collapse;
    color: var(--e-global-color-text);
    font-family: Lato;
    
    }
table tr{width:100%;

    }
table td {
    border: 0px;
    padding: 5px;
    background-color: #fff !important;
    vertical-align: middle;

    }
table td:nth-child(1){
    font-weight: bold;
    text-align: right;
    }
    
@media (max-width: 767px) {
    table {
        font-size: 14px;
        border: 0;
        display: block;
        text-align: center;
        padding:0px;
        
    }
    
    table td:nth-child(2){
    font-size:12px;
    }
    
    table td {
        display: flex;
        justify-content: center;
        align-items: center;
        padding:4px 0px;
        margin: 0px;
        border: 0px solid;
        width: 200%; /* I tried to fix it this way, but it fails to properly center things */
        box-sizing:border-box;
        flex:1;
    }
    
    table tr {
        display: block;
        margin: 10px 0px;
        padding:0px;
        border: 0px;
        box-sizing:border-box;
        width: 100%;
    }
}

text-align, justify-content, flex:1, margin: X auto all fail.
Setting the tr width:200% is not really working either, because the padding messes this up even when using box-sizing:border-box