元素未缩放到容器

Question

我想使用Fixed Timestep创建一个表。问题是列没有缩放到容器的100％ - 实际上flexbox，table和thead的大小正确，但tbody不是。< / p>

HTML：

tr

LESS：

<table>
    <thead>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
        </tr>
    <tr>
            <td><input placeholder="Filter" /></td>
            <td><input placeholder="Filter" /></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>456</td>
        </tr>
        <tr>
            <td>123</td>
            <td>456</td>
        </tr>
        <tr>
            <td>123</td>
            <td>456</td>
        </tr>
        <tr>
            <td>123</td>
            <td>456</td>
        </tr>
        <tr>
            <td>123</td>
            <td>456</td>
        </tr>
    <tr>
            <td>123</td>
            <td>456</td>
        </tr>
    <tr>
            <td>123</td>
            <td>456</td>
        </tr>
    <tr>
            <td>123</td>
            <td>456</td>
        </tr>
    </tbody>
</table>

Codepen here

Answer 1

为什么单元格不对齐是因为您向display: flex添加了table，并且它和thead / tbody停止的行为就是这样。

tr（thead和tbody）中的每一组（不再是正常的共享table作为直接父级）将根据其内容进行调整。

他们甚至可能是一个创建的匿名表，更好地描述了这个问题，但不能肯定地说，所以如果有人知道，请随意评论或更新我的答案。

通过添加这两个规则，它将开始类似于表的工作。

tbody tr, thead tr {
  display: flex;
}
tbody td, thead td {
  flex: 1;
}

Updated codepen

我建议您按原样使用table元素，或者如果您需要Flexbox，请使用ie div元素。

Updated codepen

Stack snippet

＆＃13;

＆＃13;

.table {
  display: flex;
  flex-direction: column;
  height: 200px;
}
.table .scroller {
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.table .scroller .row {
  flex: 1 1 auto;
}
.table .row {
  display: flex;
}
.table .row > div {
  flex: 1;
}

＆＃13;

<div class="table">
  <div class="row">
    <div>Header 1</div>
    <div>Header 2</div>
  </div>
  <div class="row">
    <div><input placeholder="Filter" /></div>
    <div><input placeholder="Filter" /></div>
  </div>
  <div class="scroller">
    <div class="row">
      <div>123</div>
      <div>456</div>
    </div>
    <div class="row">
      <div>123</div>
      <div>456</div>
    </div>
    <div class="row">
      <div>123</div>
      <div>456</div>
    </div>
    <div class="row">
      <div>123</div>
      <div>456</div>
    </div>
    <div class="row">
      <div>123</div>
      <div>456</div>
    </div>
    <div class="row">
      <div>123</div>
      <div>456</div>
    </div>
    <div class="row">
      <div>123</div>
      <div>456</div>
    </div>
    <div class="row">
      <div>123</div>
      <div>456</div>
    </div>
    <div class="row">
      <div>123</div>
      <div>456</div>
    </div>
    <div class="row">
      <div>123</div>
      <div>456</div>
    </div>
    <div class="row">
      <div>123</div>
      <div>456</div>
    </div>
    <div class="row">
      <div>123</div>
      <div>456</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;