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