title: Responsive table height Bootstrap
body: <p>How can I make table height to be responsive when displayed inside row element? In this row element there are two tables and an image, so that row height is set to fit this image. Or maybe there is another way to make labels for image with fixed size? I just found the way to set table height using something like <code>{ height: 120%; }</code>, but its not responsive.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div className="row"&gt;
    &lt;div className="col-md-8"&gt;
      &lt;div className="col-md-2"&gt;
        &lt;div className="table-responsive"&gt;
          &lt;table className="table"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th className="text-center vert-align"&gt;Table1&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {table1Content}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="col-md-5"&gt;
        &lt;img className="img-responsive" src={"data:image/jpg;base64," + this.state.image.image} /&gt;
      &lt;/div&gt;
      &lt;div className="col-md-2"&gt;
        &lt;div className="table-responsive"&gt;
          &lt;table className="table"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th className="text-center vert-align"&gt;Table2&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {table2Content}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>