將表格單元的大小調整爲零

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; 
}