在< a>中包装HTML表格行标签 [英] Wrapping HTML table rows in <a> tags

问题描述

是否可以在< a> 标签中包装整个表格行？我想让整行成为一个可点击的链接。

如果我尝试以下操作，链接将呈现在表格的上方和外部：

 < table> 
< a href =value_url>< tr>< td>值< / td>< td>值< / td>< / tr>< / a> 
< a href =value_url>< tr>< td>值< / td>< td>值< / td>< / tr>< / a> 
< / table> 
  

呈现如下：

 < a href =value_url>< / a> 
< a href =value_url>< / a> 
< table> 
< tr>< td>值< / td>< td>值< / td>< / tr> 
< tr>< td>值< / td>< td>值< / td>< / tr> 
< / table> 
  

解决方案

和使用js有点脏，这是另一种html / css方法：

HTML：

 < div class =table> 
< a class =table-rowhref =/ mylink> 
< div class =table-cell> ...< / div> 
< div class =table-cell> ...< / div> 
< div class =table-cell> ...< / div> 
< / a> 
< / div> 
  

CSS：

  .table {display：table; } 
 .table-row {display：table-row; } 
 .table-cell {display：table-cell; } 
  

Is it possible to wrap entire table rows in <a> tags? I want the the entire row to be a clickable link.

If I try the following, the links get rendered above and outside the table:

This:

<table>
<a href="value_url"><tr><td>value</td><td>value</td></tr></a>
<a href="value_url"><tr><td>value</td><td>value</td></tr></a>
</table>

Renders like this:

<a href="value_url"></a>
<a href="value_url"></a>
<table>
<tr><td>value</td><td>value</td></tr>
<tr><td>value</td><td>value</td></tr>
</table>

解决方案

as a link in each td is not a good alternative and using js is a bit dirty, here is another html/css approach:

HTML:

<div class="table">
    <a class="table-row" href="/mylink">
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
    </a>
</div>

CSS:

.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }

这篇关于在< a>中包装HTML表格行标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！