1

Buen dia, estoy intentando alinear una tabla, específicamente una columna td, lo que deseo es agregar 2 valores y alinearlos dentro de un td.

Así es como se ve hasta el momento mi tabla; introducir la descripción de la imagen aquí

Esta es la parte de mi código.

<table class="table">
  <tbody>
    <tr>
      <th>Email</th>
      <th>Status</th>
      <th>Module / Role</th>
    </tr>
    <tr>
      <td>Email 1
      </td>
      <td> Status 1
      </td>
      <td>
        <div class="col-lg-6" style="display: inline;">MODULO 1</div>
        <div class="col-lg-6" style="display: inline;"><span style="color:green">ROL 1</span></div>
      </td>
    </tr>
    <tr>
      <td>Email 2
      </td>
      <td> Status 2
      </td>
      <td>
        <div class="col-lg-6" style="display: inline;">MODULO MUCHO MAS GRANDE 2</div>
        <div class="col-lg-6" style="display: inline;"><span style="color:green">ROL 1</span></div>
      </td>
    </tr>
</table>

Cabe resaltar que el código esta bien, solo necesito el estilo y que la parte de Module/Role, se alinee Modulo al mismo nivel a la izquierda, y los roles igual, sin necesidad de usar otra columna, gracias.

Dejo una imagen de lo que quiero lograr. En realidad, lograr que todo se alinee. introducir la descripción de la imagen aquí

3
  • Pregunta ¿por qué metiste los valores de módulo y rol dentro de dos divs?
    – BetaM
    el 2 sep. 2020 a las 21:15
  • son valores que en realidad traigo desde el Back, podria ponerlos juntos, no hay problema, lo que pasa es que quiero que se alineen tanto por modulo y por rol. no se si haya otra forma de hacerlo. el 2 sep. 2020 a las 21:17
  • 1
    Hola Aunque @phpMyGuel te ofrece una solución que me gusta, veo que en algunas líneas hay dobles entradas. Para facilitar eso podrías hacer lo siguiente: El tercer th extendido sobre dos columnas así <th colspan="2">Module/role</th> y en las líneas interiores asignar cada valor en su celda. Obviamente, algunas celdas en las columnas 1 y 2 irán vacías cuando la línea debe contener asignaciones dobles. Nota: al tercer th debes asignarle una clase para darle un estilo centrado de modo que se vea bien el conjunto.
    – quevedo
    el 2 sep. 2020 a las 21:58

3 respuestas 3

2

Podrías usar las ventajas que te ofrecen las cajas flexibles.

Si haces que el <td> que contiene tus dos columnas (module y role) tenga la propiedad display: flex y además usas justify-content: space-between conseguirás esa alineación que buscas.

Para darles esas propiedades cree una clase y se la añadí a los <td> en cuestión.

.alineado {
  display: flex;
  justify-content: space-between;
}

/* Para dar una separación entre las dos columnas del <td> */
.alineado div:first-child {
  margin-right: 20px;
}
<table class="table">
  <tbody>
    <tr>
      <th>Email</th>
      <th>Status</th>
      <th>Module / Role</th>
    </tr>
    <tr>
      <td>Email 1
      </td>
      <td> Status 1
      </td>
      <td class="alineado">
        <div class="col-lg-6" style="display: inline;">MODULO 1</div>
        <div class="col-lg-6" style="display: inline;"><span style="color:green">ROL 1</span></div>
      </td>
    </tr>
    <tr>
      <td>Email 2
      </td>
      <td> Status 2
      </td>
      <td class="alineado">
        <div class="col-lg-6" style="display: inline;">MODULO MUCHO MAS GRANDE 2</div>
        <div class="col-lg-6" style="display: inline;"><span style="color:green">ROL 1</span></div>
      </td>
    </tr>
</table>

EDIT

Aunque mi solución funciona con el ejemplo que se facilita, me percaté de que si existe diferencia de tamaño entre los textos de role vuelve a descuadrarse. Por ello considero esta segunda solución que quizá de ajuste más a lo que necesitas.

.alineado div {
  float: left;
}

.alineado div:nth-child(odd) {
  width: 60%;
}

.alineado div:nth-child(even) {
  width: 40%;
}
<table class="table">
  <tbody>
    <tr>
      <th>Email</th>
      <th>Status</th>
      <th>Module / Role</th>
    </tr>
    <tr>
      <td>Email 1
      </td>
      <td> Status 1
      </td>
      <td class="alineado">
        <div>MODULO 1</div>
        <di><span style="color:green">ROL 1</span></div>
      </td>
    </tr>
    <tr>
      <td>Email 2
      </td>
      <td> Status 2
      </td>
      <td class="alineado">
        <div>MODULO MUCHO MAS GRANDE 2</div>
        <div><span style="color:green">ROL MÁS GRANDE</span></div>
        <div>Oootro</div>
        <div><span style="color:green">OTRO ROL</span></div>
      </td>
    </tr>
</table>

3
  • Gracias, justo lo aplique y dio con normalidad. el 2 sep. 2020 a las 22:03
  • Modifiqué un poco la segunda solución para adaptarse a lo que comenta el colega @quevedo y poder así contemplar el caso de un <td> con más de un par de valores Module / Role.
    – phpMyGuel
    el 2 sep. 2020 a las 22:06
  • Gracias, lo revisare igual. el 2 sep. 2020 a las 22:06
0

Mmm... No lo entiendos, lo que quieres hacer es esto?

                    <table class="table">
                    <tbody>
                        <tr>
                            <th>Email</th>
                            <th>Status</th>
                            <th>Module / Role</th>
                        </tr>
                        <tr>
                            <td>
                                Email 1
                            </td>
                            <td>
                                Status 1
                            </td>
                            <td>
                                <div class="col-lg-6 d-inline">MODULO 1</div>
                                <div class="col-lg-6 d-inline" style="display: inline;"><span style="color:green">ROL 1</span></div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Email 2
                            </td>
                            <td>
                                Status 2
                            </td>
                            <td>
                                <div class="col-lg-6 d-inline">MODULO MUCHO MAS GRANDE 2</div>
                                <div class="col-lg-6 d-inline"><span style="color:green">ROL 1</span></div>
                            </td>
                        </tr>
                </table>

0

Tal ves solo es agregar text-align: center a los estilos de tu td, es recomendable que tambien utilices un thead

<table class="table">
     <thead>
      <tr>
       <th>Email</th>
       <th>Status</th>
       <th>Module / Role</th>
      </tr>
     </thead>
    <tbody>
     <tr>
      <td>Email 1</td>
      <td>Status 1</td>
      <td style="text-align: center;">
      <div class="col-lg-6" style="display: inline;">MODULO 1</div>
      <div class="col-lg-6" style="display: inline;"><span style="color: green;">ROL 
      1</span></div>
      </td>
     </tr>
     <tr>
      <td>Email 2</td>
      <td>Status 2</td>
      <td>
      <div class="col-lg-6" style="display: inline; text-align: center;">MODULO MUCHO MAS 
      GRANDE 2</div>
      <div class="col-lg-6" style="display: inline; text-align: center;"><span 
      style="color:green;">ROL 1</span></div>
      </td>
     </tr>
    </tbody>
   </table>

el código aquí

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.