Tablas
Encabezado en gris sobre fondo suave, filas con separadores finos y resaltado al pasar el cursor. Los estados van como etiquetas y las acciones de fila en un menú.
Lista de registros
<div class="mr-table-wrap w-100">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr><th>Folio</th><th>Nombre</th><th>Grado</th><th>Estado</th><th>Responsable</th><th class="text-end">Acciones</th></tr>
</thead>
<tbody>
<tr>
<td><a href="#tablas" class="mr-link-id">REG-14958</a></td>
<td><div class="d-flex align-items-center gap-2"><span class="mr-av mr-av-sm mr-av-soft" title="María López">ML</span>
María López</div></td>
<td>5º Primaria</td>
<td><span class="mr-state mr-state-success">
Completo
</span>
</td>
<td>Laura Ramírez</td>
<td class="text-end"><button type="button" class="btn btn-light btn-sm" aria-label="Más acciones">
<i class="ri-more-2-fill"></i>
</button>
</td>
</tr>
<tr>
<td><a href="#tablas" class="mr-link-id">REG-14960</a></td>
<td><div class="d-flex align-items-center gap-2"><span class="mr-av mr-av-sm mr-av-soft" title="Jorge Hernández">JH</span>
Jorge Hernández</div></td>
<td>1º Primaria</td>
<td><span class="mr-state mr-state-info">
Nuevo
</span>
</td>
<td><span class="text-muted">Sin asignar</span></td>
<td class="text-end"><button type="button" class="btn btn-light btn-sm" aria-label="Más acciones">
<i class="ri-more-2-fill"></i>
</button>
</td>
</tr>
<tr>
<td><a href="#tablas" class="mr-link-id">REG-05318</a></td>
<td><div class="d-flex align-items-center gap-2"><span class="mr-av mr-av-sm mr-av-soft" title="Carlos Rivas">CR</span>
Carlos Rivas</div></td>
<td>Bachillerato</td>
<td><span class="mr-state mr-state-warning">
En revisión
</span>
</td>
<td>Laura Ramírez</td>
<td class="text-end"><button type="button" class="btn btn-light btn-sm" aria-label="Más acciones">
<i class="ri-more-2-fill"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>Enlace principal de la fila
El enlace que abre el registro lleva mr-link-id (semibold, un solo por fila). Si va en una celda de encabezado de fila (th scope="row") se alinea con su encabezado igual que un td; los demás enlaces de la tabla usan mr-link.
| Folio | Nombre | Estado |
|---|---|---|
| REG-15037 | Lisbeth Alarcón Ver contacto | Contactado |
| REG-14967 | Eduardo Juárez Ver contacto | Nuevo |
<div class="mr-table-wrap w-100">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr><th scope="col">Folio</th><th scope="col">Nombre</th><th scope="col">Estado</th></tr>
</thead>
<tbody>
<tr>
<th scope="row"><a href="#tablas" class="mr-link-id">REG-15037</a></th>
<td>Lisbeth Alarcón <a href="#tablas" class="mr-link">Ver contacto</a></td>
<td><span class="mr-state mr-state-info">
Contactado
</span>
</td>
</tr>
<tr>
<th scope="row"><a href="#tablas" class="mr-link-id">REG-14967</a></th>
<td>Eduardo Juárez <a href="#tablas" class="mr-link">Ver contacto</a></td>
<td><span class="mr-state mr-state-success">
Nuevo
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Sí
El enlace que abre el registro (folio o nombre) usa mr-link-id y hay uno solo por fila. Los demás enlaces dentro de una celda usan mr-link.
No
No pongas fw-semibold ni fw-bold a mano en los enlaces de una tabla: el peso lo decide el kit con mr-link-id, para que todas las tablas se vean igual.
Paginación
<nav aria-label="Paginación de la lista">
<ul class="pagination mb-0">
<li class="page-item disabled"><a class="page-link" href="#tablas" aria-label="Anterior"><i class="ri-arrow-left-s-line"></i></a></li>
<li class="page-item active"><a class="page-link" href="#tablas">1</a></li>
<li class="page-item"><a class="page-link" href="#tablas">2</a></li>
<li class="page-item"><a class="page-link" href="#tablas">3</a></li>
<li class="page-item"><a class="page-link" href="#tablas" aria-label="Siguiente"><i class="ri-arrow-right-s-line"></i></a></li>
</ul>
</nav>