响应式表格高度引导

Question

如何使表格高度在显示在row元素内时具有响应性？在这个行元素中有两个表和一个图像，所以设置行高是为了适合这个图像。或者，也许有其他方法可以为固定大小的图像制作标签？我只是找到了使用{ height: 120%; }之类的东西来设置表格高度的方法，但它没有响应。

代码：

<div className="row">
  <div className="col-md-8">
    <div className="col-md-2">
      <div className="table-responsive">
        <table className="table">
          <thead>
            <tr>
              <th className="text-center vert-align">Table1</th>
            </tr>
          </thead>
          <tbody>
            {table1Content}
          </tbody>
        </table>
      </div>
    </div>
    <div className="col-md-5">
      <img className="img-responsive" src={"data:image/jpg;base64," + this.state.image.image} />
    </div>
    <div className="col-md-2">
      <div className="table-responsive">
        <table className="table">
          <thead>
            <tr>
              <th className="text-center vert-align">Table2</th>
            </tr>
          </thead>
          <tbody>
            {table2Content}
          </tbody>
        </table>
      </div>
    </div>
  </div>

Answer 1

使用display: flex;，并为.table和.table-responsive设置高度。

将row-eq-height添加到您的行中，并删除一个旧的类col-md-8，如果您想使用col-*-x，请在外部添加更多的row div，因为它可能与col-*-x的float属性有问题。

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.table {
  background-color: #eee;
  height: 100%;
  margin-bottom: 0;
}
.table-responsive {
  height: 100%;
}

检查结果：https://jsfiddle.net/6eq89r4r/2/