1

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

1 回答 1

1

好的，这似乎是一个 Chrome 错误。我用 Chrome Canary 试过了，css 似乎在那里工作。

于 2012-09-06T22:35:58.190 回答