Quisiera implementar el uso de Grids
de BS3 en mi Código html
para evitar el uso de tablas y que mi formulario se viera de la siguiente manera usando grid, esto para mi versión mobile, sin modificar la versión de desktop.
Actualmente mi versión de escritorio se esta viendo así:
El siguiente es mi código en HTML con el que construyo mi formulario, esta hecho con la ayuda de PHP en una función:
public function datosUsuario(){
echo '<div>';
echo '<table class="table">';
echo '<tbody>';
echo '<tr>
<td class="columna-titulo">No. Empleado:</td><td class="columna-valor">''</td>
<td class="columna-titulo">Nombre:</td><td class="columna-valor" colspan="2">''</td>
<td></td>
</tr>';
echo '<tr>
<td class="columna-titulo">Fecha Ingreso:</td><td class="columna-valor" id="TdFechaIngreso">''</td>
<td class="columna-titulo">Antigüedad (Años):</td><td class="columna-valor">''</td>
<td class="columna-titulo">Departamento:</td><td class="columna-valor">''</td>
</tr>';
echo '</tbody>';
echo '</table>';
echo '</div>';
}
Actualización:
Intente agregando a cada td
un .col-sm-12
de la siguiente manera, pero aun no logro obtener el diseño que deseo.
public function datosUsuario(){
echo '<div>';
echo '<table class="table">';
echo '<tbody>';
echo '<tr>
<td class="columna-titulo .col-sm-12">No. Empleado:</td><td class="columna-valor .col-sm-12">''</td>
<td class="columna-titulo .col-sm-12">Nombre:</td><td class="columna-valor .col-sm-12" colspan="2">''</td>
<td></td>
</tr>';
echo '<tr>
<td class="columna-titulo .col-sm-12">Fecha Ingreso:</td><td class="columna-valor .col-sm-12" id="TdFechaIngreso">''</td>
<td class="columna-titulo .col-sm-12">Antigüedad (Años):</td><td class="columna-valor .col-sm-12">''</td>
<td class="columna-titulo .col-sm-12">Departamento:</td><td class="columna-valor .col-sm-12">''</td>
</tr>';
echo '</tbody>';
echo '</table>';
echo '</div>';
}
¿Saben que estoy haciendo mal en mi código?