0

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/ Оно работает, но правильное ли это решение?

1
  • ширина может задаваться в процентах
    – Grundy
    7 мар 2016 в 9:22

1 ответ 1

2

можно воспользоваться следующим подходом: для фиксированной колонки - вложить див с шириной, а для относительных - указать ширину в процентах

function imitationChangePanelWidth() {
  var right = document.querySelector('.right');
  var width = parseInt(right.style.width);
  if (width >= 300) width = 0;
  right.style.width = (width + 50) + 'px';
}
setInterval(imitationChangePanelWidth, 2000);
body {
  margin: 0;
  padding: 0;
}
.flex-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: absolute;
}
.content {
  flex: 1;
}
table {
  border-collapse: collapse;
}
td {
  padding: 0;
}
<div class="flex-layout">
  <div class="content">

    <div style="display: flex; flex-direction: row; width: 100%; height: 20px;">
      <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>

    <div class="wrap" style="margin-top: 20px;">
      <table border="1" style="width: 100%;">
        <tbody>
          <tr>
            <td>
              <div style="width:100px;">data 1</div>
            </td>
            <td style="width:33%;">data 2</td>
            <td style="width:66%;">data 3</td>
          </tr>
          <!-- other data... -->
        </tbody>
      </table>
    </div>

  </div>
  <div class="right" style="width: 100px;"></div>
</div>

3
  • это уже лучше, но можно вынести эти правила в colgroup? типа такого <colgroup><col><div style="width:100px;">data 1</div></col><col style="width:33%;"><col style="width:66%;"></colgroup> (но оно конечно не работает) потому что в tbody я хочу использовать только для данных. я использую reactjs 7 мар 2016 в 9:42
  • @user2815962, при текущем подходе чтобы не ломалась ширина фиксированной колонки, в ней должен лежать див с фиксированной шириной. Не вижу никакой связи стилей с тем что вы используете руакт
    – Grundy
    7 мар 2016 в 9:48
  • вот сделал как мне надо на основе вашего ответа, вынес правила определяющие ширину в thead, а данные лежат в tbody jsfiddle.net/wj3uxq0d/3 - это как раз то что мне надо :) 7 мар 2016 в 10:36

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.