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

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>