min-width for fluid column in fixed width table

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/

set min-width for table to stop it from decreasing – himanshu Sep 19 '14 at 11:56 — himanshu, Sep 19 '14 at 11:56

score 1 · Accepted Answer · answered Sep 19 '14 at 11:55

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

answered Sep 19 '14 at 11:55

himanshu

1,732
1
11
12

1

This works great thanks! Only the min-width property on the table as mentioned seems to be required. Is the width: 100% instead of auto etc. for good form/cross browser consistency? – Protagonist Sep 19 '14 at 12:27
IMHO, this is a fluke. The only reason it seems to work is the `min-width: 500px;` on the ``. None of the other `min-width`'s are doing anything at all. So to boil it down, a sure-fire solution is just to ensure your table never collapses below a certain width, thereby ensuring there's always real-estate for all the columns. I'd be even safer and apply the `min-width` on the parent wrapper of the table, because I believe W3 spec doesn't officially define min/max-width for `
` either.
– Kalnode Jan 30 '23 at 02:23

score -2 · Answer 2 · answered Sep 19 '14 at 11:58

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>

Not sure why you moved the white-space: nowrap and overflow: hidden to the td.fluid, also doesn't work. Same behaviour as original. Thanks though. — Protagonist, Sep 19 '14 at 12:26

min-width for fluid column in fixed width table

2 Answers2