Question

我试图创建一个流体柱具有最小宽度的表。所有其他列都有固定的宽度，不应该变得更宽或更薄。

我可以让流体柱正确生长和收缩，这样它就会占用容器中的剩余空间，将最大宽度设置为900px，但是我不能让它采取最小宽度。

这意味着当窗口和容器被压扁时，流体柱会被覆盖，而不是在此时表现得像固定柱。

对th和/或td应用最小宽度不做任何事情。对流体td内的div应用min-wdith意味着文本具有最小宽度，但是它不会阻止列缩小到小于此最小值，因此文本位于下一列的下方＆＃39; s文本。

有什么想法吗？

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没有最小宽度，因为这是表结构。但你可以给宽度。

参见此示例

＆＃13;

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

＆＃13;

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

＆＃13;

固定宽度表中流体柱的最小宽度

2 个答案: