Question

I’m trying to use the css3 flexbox module in order to have table columns that can stretch, but still have a default width, as well as having a min-width and max-width.

This works well when the viewport is wide enough to hold the minimum widths for each column, but when the viewport shrinks, all the columns collapses. Is there any good way to make sure that the min-width/width is always maintained for flexboxes, or is there any other way to have table columns that can “flex”. I’ve only tested this with Chrome 21 so far.

CSS:

#test, #test > thead, #test > tbody {
    display: block;
    width: 100%;
}

#test tr {
    display : -webkit-flex;
}

#test tr > td, #test tr > th {
    -webkit-flex-direction: row;
}

.col1 {
    width: 35px;
}

.col2 {
    -webkit-flex: 1 200px;
    width: 120px;
    max-width: 2000px;
}

.col3 {
    -webkit-flex: 1 150px;
    width: 80px;
    max-width: 2000px;
}

.col4, .col5 {
    width: 70px;
}

.col6 {
    width: 75px;
}

.col7 {
    -webkit-flex: 1 100px;
    width: 100px;
    max-width: 2000px;
}

.col8 {
    width: 55px;
}

.col9 {
    -webkit-flex: 1 100px;
    width: 60px;
    max-width: 100px;
}

.col10 {
    width: 80px;
}

HTML:

<table id="test">
    <thead>
        <tr>
            <th class="col1">col1</th>
            <th class="col2">col2</th>
            <th class="col3">col3</th>
            <th class="col4">col4</th>
            <th class="col5">col5</th>
            <th class="col6">col6</th>
            <th class="col7">col7</th>
            <th class="col8">col8</th>
            <th class="col9">col9</th>
            <th class="col10">col10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col1">col1</td>
            <td class="col2">col2</td>
            <td class="col3">col3</td>
            <td class="col4">col4</td>
            <td class="col5">col5</td>
            <td class="col6">col6</td>
            <td class="col7">col7</td>
            <td class="col8">col8</td>
            <td class="col9">col9</td>
            <td class="col10">col10</td>
        </tr>
    </tbody>
</table>

Answer 1

Ok, this seems to be a Chrome bug. I tried this out with Chrome Canary and the css seems to be working there.