固定寬度表中液柱的最小寬度

Question

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

我可以正確地生長和收縮液柱，以便它佔用容器中的剩餘空間，它將最大寬度設置爲900px，但是我無法使其達到最小寬度。

這意味着當窗戶和集裝箱被壓扁時，流體柱被覆蓋，而不是像現在的固定柱那樣運行。

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

任何想法？

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 { 
 
\t width: auto; 
 
\t 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>