固定寬度表中流體柱的最小寬度

Question

我正在嘗試創建一個流體柱具有最小寬度的表。 所有其他列都有固定的寬度，不應該變得更寬或更薄。

我可以讓流體柱正確地生長和收縮，這樣它就占據容器中的剩余空間，將最大寬度設置為900px，但是我不能讓它采取最小寬度。

這意味着當窗口和容器被壓扁時，流體柱被覆蓋，而不是在此時表現得像固定柱。

將最小寬度應用於th和/或td不會執行任何操作。 將min-wdith應用於流體td內的div確實意味着文本具有最小寬度，但是它不會使列縮小到小於此最小值，因此文本位於下一列文本的下方。

有任何想法嗎？

HTML：

<div class="container">
<table>
    <thead>
        <tr>
            <th class="fixed">fixed</th>
            <th class="fixed">fixed</th>
            <th class="fixed">fixed</th>
            <th class="fluid">fluid</th>
            <th class="fixed">fixed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>fixed</td>
            <td>fixed</td>
            <td>fixed</td>
            <td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
            <td>fixed</td>
        </tr>  
    </tbody>            
</table>
</div>

CSS：

.container {
    max-width: 900px;
}

table {
    table-layout: fixed;
    width: 100%;
    border: 1px solid #333;
    border-collapse: separate;
    border-spacing: 0;
}

th.fixed {
    width: 100px;
}

th.fluid {
    min-width: 100px;
}

td.fluid div {
    width: auto;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

td.fluid {
    background-color: #aaa;
    min-width: 100px;
}

td {
    background-color: #ddd;
    border-right: 1px solid #333;
}

tr td {
     text-align: center;
}

table th, table td {
    border-top: 1px solid #333;
}

JSfiddle： http ： //jsfiddle.net/ajcfrz1g/14/

Answer 1

DEMO

.container {
    max-width: 900px;
}

table {
    table-layout: fixed;
    width: 100%;
     min-width: 500px;
    border: 1px solid #333;
    border-collapse: separate;
    border-spacing: 0;
}


th.fixed {
    width: 100px;


}

th.fluid {
    min-width: 100px;
}

td.fluid div {
    width: 100%;
    min-width:100px;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

td.fluid {
    background-color: #aaa;
    min-width: 100px;
    width: 100%;
}

td {
    background-color: #ddd;
    border-right: 1px solid #333;
}
 tr td {
     text-align: center;
}
 }

table th, table td {
    border-top: 1px solid #333;
}

Answer 2

我想解決你的問題。 在這個你的fluid沒有最小寬度，因為這是表結構。 但你可以給寬度。

看這個例子

 .container { max-width: 900px; } table { table-layout: fixed; width: 100%; border: 1px solid #333; border-collapse: separate; border-spacing: 0; } th.fixed { width: 100px; } th.fluid { min-width: 100px; } td.fluid div { width: auto; overflow: hidden; text-overflow: ellipsis; } td.fluid { background-color: #aaa; min-width: 100px; white-space: nowrap; overflow: hidden; } td { background-color: #ddd; border-right: 1px solid #333; } tr td { text-align: center; } } table th, table td { border-top: 1px solid #333; } 

 <div class="container"> <table> <thead> <tr> <th class="fixed">fixed</th> <th class="fixed">fixed</th> <th class="fixed">fixed</th> <th class="fluid">fluid</th> <th class="fixed">fixed</th> </tr> </thead> <tbody> <tr> <td>fixed</td> <td>fixed</td> <td>fixed</td> <td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td> <td>fixed</td> </tr> </tbody> </table> </div>