min-width for fluid column in fixed width table - html

Question

I'm trying to create a table where a fluid column has a min width.
All other columns have a fixed width, and should not grow wider or thinner.
I can get the fluid column to grow and shrink correctly, so that it takes up the remaining space in container which sets the max width to 900px, however I can't get it to take a minimum width.
This means when the window and container are squashed, the fluid column gets covered, rather than behave like the fixed columns at this point.
Applying a min-width to the th and/or td doesn't do anything.
Applying a min-wdith to the div inside the fluid td does mean the text has a minimum width, however it doesn't stop the column from shrinking to less than this minimum, so the text is underneath the next column's text.
Any ideas?
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

i am trying to solve your problem. in this your fluidhas no min-width because this is table structure. but you can give width.
see this example
.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>