html - 将表格单元格的大小调整为零

Question

你能帮忙解决一下吗？在没有 javascript 和@media 的情况下，可能有一些解决方案。

Image for better understanding my problem

所有细节都在里面，但没有太多内容。主要问题是随着窗口/分辨率的变化将左右列的大小调整为零，但我很难做到这一点

.table {
    min-width: 399px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: table;
}
.table-cell-left {
    min-width: 0px;
    max-width: 9999px;
    width: 49%;
    display: table-cell;
    background-color:#933333;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    padding: 0 0 0 0;
}
.table-cell-right {
    min-width: 0px;
    max-width: 9999px;
    width: 49%;
    display: table-cell;
    background-color:#339933;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
}
.table-cell-middle {
    min-width: 399px;
    max-width: 999px;
    width: 2%;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-color:#333393;
    color: #ffffff;
}

<div class="table">
    <div class="table-cell-left">
        Left
    </div>
    <div class="table-cell-middle">
        Middle
    </div>
    <div class="table-cell-right">
        Right
    </div>
</div>

Jsfiddle example谢谢!

Answer 1

.table {
    min-width: 399px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: table;
}
.table-cell-left {
    min-width: 0px;
    max-width: 9999px;
    width: 49%;        //remove this
    display: table-cell;
    background-color:#933333;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    padding: 0 0 0 0;
}
.table-cell-right {
    min-width: 0px;
    max-width: 9999px;
    width: 49%;         // remove this
    display: table-cell;
    background-color:#339933;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
}
.table-cell-middle {
    min-width: 399px;
    max-width: 999px;
    width: 2%;         // remove this
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-color:#333393;
    color: #ffffff;
}