如何在Bootstrap中使表格中的整行都可以作为链接点击

Bootstrap中的表格可以使用传统的<table>标签或使用内置的 “网格 “系统来形成。早期，<table>标签经常被用来为网站设计网格，但现在有了CSS中的flexbox和表格显示属性，直接使用div就更容易了。

在下面的例子中，我们将看到如何使一个完整的行在两种情况下都可以作为链接点击。

传统的<table>标签

现在，为了使整个行都能被点击，人们可能会想到把<tr>标签的内容包装成一个链接（<a>）元素。但这不会有什么结果。实际上，这是一种无效的HTML方法，应该避免。

我们可以在<tr>标签上调用onclick方法，然后根据要求导航到任何位置。下面是一个解释如何做到这一点的例子。

在这种情况下，一个示例表格的标记看起来像这样。

<table>
  <tr>
    <th>IDE</th>
    <th>Link</th>
  </tr>
  <tr>
    <td>GeeksforGeeks</td>
    <td>https://ide.geeksforgeeks.org/Y4U8qx</td>
  </tr>
</table&gt

示例: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>

输出:
* 在点击该行之前。
如何在Bootstrap中使表格中的整行都可以作为链接点击？
* 点击行后。

GeeksforGeeks IDE will open

使用Bootstrap网格系统：

使用Bootstrap网格系统构建表格要比使用<table>标签容易得多，而且提供了更多的灵活性。

在这种情况下，要使整个行成为可点击的，可以用一个链接<a>标签来包裹其内容。下面是一个这样做的例子。

前面例子中完全相同的表格可以用Bootstrap重新设计如下。

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

示例:

<!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>