表格灵活的html

Question

表格灵活，我有问题。

在第一个例子中，我使用div。哪个可以用css定制。我正在谈论flex

但是在第二个例子中，我使用了表格。我无法为表设置css。至少我没有在互联网上找到答案......

所以我使用javascript。在第三个例子中，计算宽度。我在iframe上设置了resize事件，因为它不能在div上使用，表的宽度可以因其他因素而变化。所以我不想使用window.onresize = ...

这是对的吗？如何解决这个问题？

＆＃13;

＆＃13;

function imitationChangePanelWidth () {
  var right = document.querySelector('.right');
  var width = parseInt(right.style.width);
  if (width >= 500) width = 0;
  right.style.width = (width + 100) + 'px';
}
setInterval(imitationChangePanelWidth, 2000);


frames[0].onresize = e => {
  var wrap = document.querySelector('.wrap');
  var cols = wrap.querySelectorAll('col');

  var width = 0, flex = 0;
  Array.prototype.forEach.call(cols, col => {
    var w = col.getAttribute('data-width');
    if (w === null) {//flex
      flex += parseInt(col.getAttribute('data-flex'));
    } else {
      width += parseInt(w);
    }
  });

  var segment = (wrap.offsetWidth - width) / flex;

  Array.prototype.forEach.call(cols, 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';
    }
  });
}

＆＃13;

body {
  margin: 0;
  padding: 0;
}
.flex-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: absolute;
}
.content {
  flex: 1;
}
.right {

}

＆＃13;

<div class="flex-layout">
  <div class="content">
    <!-- the first example -->
    <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>

    <!-- second example. does not work -->
    <table border="1" style="width: 100%; margin-top: 20px;">
      <colgroup>
        <col style="width: 100px;">
        <col style="flex: 1;"> <!-- !!! -->
        <col style="flex: 2;"> <!-- !!! -->
      </colgroup>
      <tbody>
        <tr>
          <td>data 1</td>
          <td>data 2</td>
          <td>data 3</td>
        </tr>
        <!-- other data... -->
      </tbody>
    </table>

    <!-- third example -->
    <div class="wrap" style="margin-top: 20px;">
      <iframe style="width: 100%; height: 0; border: 0;"></iframe>
      <table border="1" style="width: 100%;">
        <colgroup>
          <col data-width="100">
          <col data-flex="1">
          <col data-flex="2">
        </colgroup>
        <tbody>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
          <!-- other data... -->
        </tbody>
      </table>
    </div>

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

＆＃13;

＆＃13;

＆＃13;