Bootstrap 4- Is there a way to make a table row clickable?

Question

I'm using the 'table-hover' in B4, Is there anyway to put an href to the table rows that are being hovered so they are actually clickable?

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

http://stackoverflow.com/questions/17147821/how-to-make-a-whole-row-in-a-table-clickable-as-a-link — Michael Coker, Feb 19 '17 at 21:54
clickable for what reason? to navigate or to show/hide content? — Carol Skelly, Feb 20 '17 at 00:27

Simon Hyll · Answer 1 · 2017-02-19T22:02:42.900

Here's one way of doing it. Note that I'm using Javascript here, but using window.location.assign('http://www.google.com'); will do the same thing as "href". Note the single quote, not double.

function hello(text) {
alert(text);
}

.table-hover tr:hover {
background:#00ff00;
}

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="hello('row 1')">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr onclick="window.location.assign('http://www.google.com');">
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr onclick="hello('row 3')">
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Can also add `cursor: pointer;` to the style if you want the cursor to change to the hand to indicate a clickable area. — John Harper, Oct 14 '20 at 14:05

Bootstrap 4- Is there a way to make a table row clickable?

1 Answers1