在 td 内创建链接的 HTML 问题答案

【问题标题】：HTML trouble making a link inside a td在 td 内创建链接的 HTML 问题
【发布时间】：2016-10-01 11:04:11
【问题描述】：

我在表格单元格中放置了一个链接，但它不起作用。我尝试使用 javascript 函数打开一个我更喜欢的窗口，但这也不起作用。所以我四处寻找信息，发现了这个 SO 页面：How can I make a link from a <td> table cell。

我尝试了那里似乎适用的所有方法，以及这些方法的一些变体，但它们都没有奏效；虽然我确实得到了一个简单的演示来工作。在该页面上向我提出的建议是我的代码中的其他内容导致了问题，这在我看来很可能。

我将代码放在下面，也许有人可以提供帮助？我不在乎它是什么类型的链接——无论是整个单元格，还是只是单词——只要它将我带到所需的页面即可。

<table style = "width: 100%; margin-top: 20px">
<tr>
   <td>
      <a class = "headscript"> Your Communications</a>
        <p class = "nextscript"> There is a lot of correspondence blah, blah...
          <ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
              <li>Item 1 text stuff </li>
              <li>Item 2 more text   </li>

        <p style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; "> </p>
              <li>Item 3 yet more text</li>
       </ul>
    </p>
  </td>

  <td style = "padding-left:20px;">
    <a class = "headscript"> Your Cost </a> 
      <p class = "nextscript"> some text here</p>

    <table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
    <tr>
        <td> <b> Your annual revenue</b></td>
        <td> <b>Your costs </b> </td>
  </tr>
  <tr>
       <td> Up to $50</td>
       <td> $whatever </td>
  </tr>

这是我想要链接的地方——显示的代码是建议之一，但它对我不起作用：

   <tr>  
      <td style = "padding: 0"> additional charges
         <a href="overcharges.cfm">
            <div style="height:100%;width:100%"> more info
            </div>
        </a>
      </td>

     <td> lots of text here, so this cell is much longer than the one with the desired link 
     </td
 </tr>

（希望上面的代码是正确的。tr 和 td 标签中的小错误似乎没有什么区别，但可能会产生误导。）

【问题讨论】：

也许这只是一个转录错误，但你最后的 </td> 格式错误：</td
还有，到底是什么没用？
您打开了一些标签，请尝试在需要的地方关闭它们。但这不是问题。你的链接对我来说很好用。
我很高兴它与您合作得很好。下面的阿曼也有它的工作。所以我一直很困惑。顺便说一句，我确实尝试关闭所有标签，但有时我会丢失它，但正如你所说，这不是问题。

标签： html html-table

【解决方案1】：

错误与元素结构有关。 “P”元素不能是“ul”的子元素。其他是由于类似的标签和范围不匹配。

刚刚完善了代码。它在这里工作

块引用

    <body>
<table style = "width: 100%; margin-top: 20px">
<tr>
   <td>
      <a class = "headscript"> Your Communications</a>
        <div class = "nextscript"> There is a lot of correspondence blah, blah...
        <ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
              <li>Item 1 text stuff </li>
              <li>Item 2 more text   </li>
              <li style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; ">Item 3 yet more text</li>
       </ul>
    </div>
  </td>

  <td style = "padding-left:20px;">
    <a class = "headscript"> Your Cost </a> 
      <p class = "nextscript"> some text here</p>

    <table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
    <tr>
        <td> <b> Your annual revenue</b></td>
        <td> <b>Your costs </b> </td>
  </tr>
  <tr>
       <td> Up to $50</td>
       <td> $whatever </td>
  </tr>  
     <tr>  
      <td style = "padding: 0"> additional charges
         <a href="overcharges.cfm">
            <div style="height:100%;width:100%"> more info
            </div>
        </a>
      </td>

     <td> lots of text here, so this cell is much longer than the one with the desired link 
     </td>
 </tr>
 </table>
  </td>
</tr>
</table>

这里的工作示例 https://jsfiddle.net/aman9753/jya5L1t5/

【讨论】：

嗨，Aman，我已将您的示例集成到我的程序中，但它仍然无法正常工作。我尝试了您的 jsfiddle，它似乎确实有效，尽管这两个
顺便说一句，我在
下有很多
。在编写文档时使用它，所以我有它的页面。它似乎工作正常。