Min-Width for Fluid Column in Fixed Width Table

I am trying to create a table where the liquid column has a minimum width. All other columns have a fixed width and should not grow or shrink.

I can get the fluid column to grow and shrink correctly so that it takes up the remaining space in the container, which sets the maximum width to 900px, however I cannot get it to take the minimum width.

This means that when the window and container are crushed, the liquid column is closed, rather than behaving like fixed columns at that point.

Applying min-width to th and / or td does nothing. Applying min-wdith to a div inside the td fluid means the text has a minimum width, however it doesn't stop the column from shrinking to less than that minimum, so the text is below the text of the next column.

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/

+3


source to share


2 answers


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

      

+1


source


I am trying to solve your problem. in this yours fluid

doesn't have min width because it is a table structure. but you can specify the 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>
      

Run codeHide result


-1


source







All Articles