响应式表高度 Bootstrap

Posted 2023-02-22

【中文标题】响应式表高度 Bootstrap

【英文标题】：Responsive table height Bootstrap

【发布时间】：2016-10-26 11:10:23

【问题描述】：

如何使表格高度在行元素内显示时响应？在这个行元素中有两个表格和一个图像，所以行高设置为适合这个图像。或者也许还有另一种方法可以为固定大小的图像制作标签？我刚刚找到了使用 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>

【问题讨论】：

不确定我是否完全理解您要完成的工作。你能提供一个例子或一个 JS.Fiddle 吗？默认情况下，表格单元格将展开为一行中最大的元素（除非里面的内容是绝对定位的）

@crazymatt 嘿，感谢您的回复，我刚刚根据我的情况创建了jsfiddle。如您所见，图像的两侧有两个表格，所以我只想将它们拉伸到图像大小（表格行高应该是动态的）。

【参考方案1】：

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

将row-eq-height添加到您的行中，并删除旧类col-md-8，如果要使用col-*-x，请在外面添加更多row div，因为@987654330的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/

【讨论】：

感谢您的回答，但表格仍然比图片小，它没有解决问题

已更新，请查看上面的链接jsfiddle链接。