Помогите сверстать таблицу/слои с тремя колонками разного размера

[UDAV]

<table style="width: 100%;height: 92px;">
    <tr>
        <td style="background: #ff7000;">1</td>
        <td style="background: pink; max-width: 1200px; min-width: 800px;">2</td>
        <td style="background: #f00;">3</td>
    </tr>
</table>

Помогите сверстать на слоях или сделать таблицей чтоб работали стили.
Суть такая, на 100% тянется таблица/слой, средняя колонка должна иметь максимальный и минимальный размеры, боковые колонки должны дотягиваться до края экрана.

 

[e80]

из того что пришло первое в голову

<table style="width: 100%;height: 92px;">
    <tr>
        <td width="50%" style="background: #ff7000;">1</td>
        <td style="background: pink; max-width: 1200px; min-width: 800px;">2</td>
        <td width="50%" style="background: #f00;">3</td>
    </tr>
</table>

 

[UDAV]

Средний блок не меняет размеры.
Для просмотра ссылки Войди или Зарегистрируйся

 

[Girt]

На таблицах такое не сделать.
Как вариант на дивах:

<div style="width:100%; white-space: nowrap">
    <div style="display: inline-block; background: #ff7000; calc((100% - 800px)/2)">1</div>
    <div style="display: inline-block; background: pink; width: 50%; max-width: 1200px; min-width: 800px;">2</div>
    <div style="display: inline-block; background: #f00; calc((100% - 800px)/2)">3</div>
</div>

При изменении размера и изначально с помощью js выставляем текущий width среднего блока вместо 800px в стилях боковых блоков.

 

[Platton]

Средний блок не меняет размеры.
Для просмотра ссылки Войди или Зарегистрируйся

Как это так средний блок не должен менять размеры если задано max-width: 1200px; min-width: 800px;?
Чтобы он не менял размеры он должен быть фикс - ширины

 

[maxkazartsev]

Можно реализовать на бутстрап - Для просмотра ссылки Войди или Зарегистрируйся
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-xs-4">.col-md-4</div>
</div></div>

У себя проверил, работает. Для дива col-md-4 можно задать размеры или поменять на col-lg-4, увеличится минимальный размер дива автоматом.

 

[UDAV]

Как это так средний блок не должен менять размеры если задано max-width: 1200px; min-width: 800px;?
Чтобы он не менял размеры он должен быть фикс - ширины

Мне нужно чтобы он менял размеры, я же написал. В твоем примере он не меняет.

Для просмотра ссылки Войди или Зарегистрируйся, а без js можно как-то?

Для просмотра ссылки Войди или Зарегистрируйся, ради одной таблички фреймворк как-то не хочется подключать -) К тому же в твоем примере все ячейки будут заданы в процентах, а мне нужно чтобы средняя была размерами ОТ и ДО.

 

[Girt]

Вот набросок решения без js:

<div class="flex-container">
        <div class="flex-block left">1</div>
        <div class="flex-block center">2</div>
        <div class="flex-block right">3</div>
</div>
<style>
div.flex-container {
    width: 100%;
    display: flex;
}
div.flex-block {
    flex-grow: 0;
}
div.flex-block.left, div.flex-block.right {
    flex-basis: 25%;
    flex-grow: 1;
}
div.flex-block.center {
    background: pink;
    max-width: 1200px;
    min-width: 800px;
    flex-basis: 50%;
}
div.flex-block.left {
    background: #ff7000;
}
div.flex-block.right {
    background: #f00;
}
</style>

Осталось установить оптимальные значения flex-basis.

 

[UDAV]

Girt, интересное решение, а как с кросбраузерностью? У меня в хроме почему-то средняя колонка занимает минимальное значение.
flex-basis надо как регулировать? Т.е. там не 50% изначально должно стоять?

 

[Girt]

Girt, интересное решение, а как с кросбраузерностью? У меня в хроме почему-то средняя колонка занимает минимальное значение.
flex-basis надо как регулировать? Т.е. там не 50% изначально должно стоять?

У тебя ширина экрана какая? Если меньше 1600px, то всё правильно, 50% - это меньше 800px (используется min-width).
Грубо говоря, flex-basis - это ширина элемента.
Т.к. у центрального блока flex-basis: 50%; и ширина экрана меньше 1600px, то при растяжении первым делом будут увеличиваться боковые блоки. Вот здесь и нужно выбрать оптимальное значение. Соответственно сумма должна быть 100%.
По поводу кроссбраузерности, основная линейка браузеров (Firefox, Opera, IE, Chrome) поддерживает.