¿Cómo puedo hacer que la altura de la mesa para responder cuando aparece dentro del elemento de fila? En este elemento de fila hay dos mesas y una imagen, de modo que la altura de la fila es configurar para adaptarse a esta imagen. O tal vez hay otra manera de hacer las etiquetas de imagen con tamaño fijo? Acabo de encontrar la manera de establecer la altura de la mesa con algo similar a { height: 120%; }, pero no su capacidad de respuesta.

Código:

<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>
  • No estoy seguro de que entiende completamente lo que usted está tratando de lograr. Podría usted dar un ejemplo o un JS.El violín? De forma predeterminada una celda de la tabla se expande al elemento más grande en una fila (a menos que el contenido en el interior es absoluta posicionado)
  • hey gracias por responder, acabo de crear jsfiddle con mi situación. Como usted puede ver, hay dos tablas en los laterales de la imagen, así que voy a estirar de ellos para el tamaño de la imagen(fila de la tabla de la altura debe ser dinámico).
InformationsquelleAutor Roman | 2016-06-23

1 Comentario

  1. 3

    Utilizando display: flex; y también ajustar la altura para .table y .table-responsive.

    Agregar row-eq-height a su fila, y quitar la vieja clase col-md-8, si desea utilizar col-*-x, por favor, agregue más row div exterior, ya que puede estar mal con float atributo de col-*-x.

    .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%;
    }

    De resultados de verificación de aquí: https://jsfiddle.net/6eq89r4r/2/

    • Gracias por tu respuesta, pero el cuadro es todavía más pequeño que la imagen, lo que no soluciona el problema
    • Actualizado, por favor, eche un vistazo en el enlace jsfiddle enlace de arriba.
    • Huy Nguyen gracias compañero, funciona a la perfección!

Dejar respuesta

Please enter your comment!
Please enter your name here