Las tablas en Bootstrap se pueden formar usando las etiquetas <table> tradicionales o usando el sistema de ‘cuadrícula’ incorporado. Anteriormente, las etiquetas <table> se empleaban a menudo para diseñar cuadrículas para los sitios, pero hoy en día con las propiedades de visualización de tabla y cuadro flexible en CSS, es más fácil usar solo divs.
En los siguientes ejemplos, veremos cómo hacer clic en una fila completa como enlace para ambos casos.
- Etiqueta de tradición <tabla>:
Ahora, para hacer que se pueda hacer clic en toda la fila, uno puede pensar en envolver el contenido de la etiqueta <tr> en un elemento de enlace (<a>). Pero eso no resultaría en nada. En realidad, es un enfoque HTML no válido y debe evitarse.
Podemos llamar al método onclick en la etiqueta <tr> y luego navegar a cualquier ubicación según los requisitos. Aquí hay un ejemplo que explica cómo hacerlo.
En este caso, el marcado de una tabla de ejemplo se ve así:
<table>
<tr>
<th>IDE</th>
<th>Link</th>
</tr>
<tr>
<td>GeeksforGeeks</td>
<td>https://ide.geeksforgeeks.org/Y4U8qx</td>
</tr>
</table>
Ejemplo 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<title>Table Row Clickable</title>
<style>
th {
background: green;
border: 2px solid black;
}
.clickable {
height: 50px;
background: gray;
border: 2px solid black;
}
.clickable:hover {
background: green;
}
</style>
</head>
<body>
<h1 style="color:green;text-align:center;">GeeksforGeeks</h1>
<div class="container">
<table class="w-100">
<tr class="text-center">
<th>IDE</th>
<th>link</th>
</tr>
<tr class="clickable text-center"
onclick="window.location='https://ide.geeksforgeeks.org/Y4U8qx'">
<td>GeeksforGeeks</td>
<td>https://ide.geeksforgeeks.org/Y4U8qx</td>
</tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>
</html>
- Producción:
- Antes de hacer clic en la fila:
- Después de hacer clic en la fila:
GeeksforGeeks IDE will open
- Usando el sistema de cuadrícula Bootstrap:
Crear tablas usando Bootstrap Grid System es mucho más fácil y brinda mucha más flexibilidad que usar la etiqueta <table>.
Para hacer que se pueda hacer clic en toda la fila en este caso, se puede usar una etiqueta de enlace <a> para envolver su contenido. Aquí hay un ejemplo de cómo hacerlo.
La misma tabla exacta en el ejemplo anterior se puede rediseñar usando Bootstrap de la siguiente manera:
<div class="row"> <div class="col-6"><b>IDE</b></div> <div class="col-6"><b>Link</b></div> <div class="col-6 py-3">GeeksforGeeks</div> <div class="col-6 py-3">https://ide.geeksforgeeks.org/Y4U8qx</div> </div>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<title>Table Row Clickable</title>
<style>
.clickable {
height: 40px;
}
</style>
</head>
<body>
<h1 style="color:green;text-align:center;">GeeksforGeeks</h1>
<div class="container">
<center class="row">
<div style="border:2px solid black"
class="col-6 py-2">
<b>IDE</b>
</div>
<div style="border:2px solid black"
class="col-6 py-2">
<b>Link</b>
</div>
<div style="border:2px solid black" class="col-12">
<a class="row clickable"
href="https://ide.geeksforgeeks.org/Y4U8qx">
<div class="col-5 py-2">
GeeksforGeeks
</div>
<div class="col-5 py-2">
https://ide.geeksforgeeks.org/Y4U8qx
</div>
</a>
</div>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>
</html>
- Producción:
- Antes de hacer clic en la fila:
- Después de hacer clic en la fila:
GeeksforGeeks IDE will open