css3 умеет настраивать ширины блоков. Например, у нас есть некий контейнер, внутри которого есть 3 блока. Ширина первого блока равна 100 пикселей, а ширины 2го и 3го должны растянуться по оставшейся ширине, при чем, ширина 3го блока должна быть в 2 раза больше 2го. Эта задача легко решается при помощи display: flex
.
<div style="display: flex; flex-direction: row; width: 100%;">
<div style="width: 100px; border: 1px solid black;">data 1</div>
<div style="flex: 1; border: 1px solid black;">data 2</div>
<div style="flex: 2; border: 1px solid black;">data 3</div>
</div>
Но у меня начинаются проблемы, когда я хочу сделать что то подобное с таблицей. Тег col
не понимает flex
, ему нужно задавать конкретное количество пикселей.. поправьте, если я не прав..
<table border="1" style="width: 100%;">
<colgroup>
<col width="100">
<col flex="1"> <!-- не понимает flex!!!! -->
<col flex="2"> <!-- не понимает flex!!!! -->
</colgroup>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
<!-- other data... -->
</tbody>
</table>
Поэтому я рассчитываю ширину каждого столбца вручную. Здесь важно понимать, что ширина таблицы равна 100%
по отношению к внешнему контейнеру. Т.е. если div
равен 250
пикселей, то сумма всех колонок должна быть тоже 250
пикселей
<!-- если этот контейнер равен 250 пикселей, то и таблица должна быть тоже равна 250px, (100 + 50 + 100) -->
<div style="width: 250px;">
<table border="1">
<colgroup>
<col width="100">
<col flex="1"> <!-- 50px -->
<col flex="2"> <!-- 100px -->
</colgroup>
<tbody>
<!-- data... -->
</tbody>
</table>
</div>
Т.е. ширина первой колонки — статична 100
пикселей, а вот ширины оставшихся 2 колонок зависит от ширины внешнего контейнера. Алгоритм расчета в этой функции
function updateWidthColumns (table) {
var parent = table.parentNode;
var cols = table.querySelectorAll('col');
var width = 0, flex = 0;
Array.prototype.forEach.call(cols, function (col) {
var w = col.getAttribute('data-width');
if (w === null) {//flex
flex += parseInt(col.getAttribute('data-flex'));
} else {
width += parseInt(w);
}
});
var segment = (parent.offsetWidth - width) / flex;
Array.prototype.forEach.call(cols, function (col) {
var w = col.getAttribute('data-width');
if (w === null) {//flex
var flex = parseInt(col.getAttribute('data-flex'));
col.style.width = (segment * flex) + 'px';
} else {
col.style.width = w + 'px';
}
});
}
Все бы хорошо, но в некоторый момент времени размер внешнего контейнера может измениться. И размеры столбцов нужно пересчитывать. Поэтому нужно отслеживать размеры внешнего контейнера. Первый вариант это привязать событие onresize
к window
Window.onresize = function () {
updateWidthColumns(table);
}
Но размер внешнего контейнера может меняться без изменения окна браузера, поэтому я решил использовать iframe
для отслеживания ширины контейнера.
вот пример https://jsfiddle.net/wj3uxq0d/1/ Оно работает, но правильное ли это решение?