响应 table 高度 Bootstrap

Question

如何使 table 高度在显示在行元素内时响应？在该行元素中有两个 table 和一个图像，因此行高设置为适合该图像。或者也许还有另一种方法可以为固定大小的图像制作标签？我刚刚找到了使用 { height: 120%; } 之类的方法来设置 table 高度的方法，但它没有响应。

代码：

<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 添加到您的行，并删除旧的 class 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/

响应 table 高度 Bootstrap

Responsive table height Bootstrap

css

html-table

reactjs

twitter-bootstrap-3

react-bootstrap