Question

在HTML中，我正在创建一个表格，并使每一行中的整个单元格都可单击。这些单元格链接到一个页面，其中包含每个账单的更多详细信息。

每行中的单元格为<a href ...>。每个单元格上的超链接都可以正常工作，但边界上不能正常工作。

很遗憾，我不允许在这里显示图片。 https://i.imgur.com/Ti7O7pP.png

要将光标箭头更改为光标指针，我已经这样做了：

.borderCursor:hover {
    cursor: pointer !important;
}

但这只是光学的。

我为你准备了小提琴：

https://jsfiddle.net/otenmoten/s8reyktm/

我希望单击单元格的边框，然后重定向到详细信息页面。

怎么办？

Answer 1

Thymeleaf的最终解决方案：

<tr th:onclick="|location.href = '@{...}'|" class="dataRow">
    <td> ... </td>
    <td> ... </td>
    ..............
</tr>

Answer 2

您还可以像这样使用box-shadow：

 -webkit-box-shadow: inset 0px 0px 0px 3px #f00;
 -moz-box-shadow: inset 0px 0px 0px 3px #f00;
  box-shadow: inset 0px 0px 0px 3px #f00;

确保将此样式添加到锚标记中

Answer 3

除了@Zohaib的评论，您还可以在下面添加内容，以将空格保留在pip install soupsieve

<a>

Answer 4

您是否期望这样：

.makeBorder {
  border: 10px solid green;
}

.borderCursor:hover {
    cursor: pointer !important;
}
td{
padding:5px;
}

<html>
<head>
</head>
<body>
  <table>
    <tr>
      <td >
        <a class ="makeBorder borderCursor" href = "www.google.de">KLICK ME [--1--]</a>
      </td>
      <td>
        <a href = "www.google.de">KLICK ME [--2--]</a>
      </td> 
      <td>
        <a href = "www.google.de">KLICK ME [--3--]</a>
      </td>
    </tr>
    <tr>
      <td>
        <a href = "www.google.de">KLICK ME [--4--]</a>
      </td>
      <td>
        <a href = "www.google.de">KLICK ME [--5--]</a>
      </td> 
      <td>
        <a href = "www.google.de">KLICK ME [--6--]</a>
      </td>
    </tr>
  </table>
</body>
</html>

如果您确实想为td添加填充，则可以将其删除。

Answer 5

尝试使它像这样：

<td onclick="location.href ='https://www.page.com'">

链接<table>中<td>边框上的href

5 个答案: