HTML5の要素（ハイパーリンク）にテーブル行をラップする

Question

"a"要素（ハイパーリンク）に表の行をラップして、行全体をクリック可能にしようとしています。私はHTML5のdoctypeを使用しています。これはこの種のことを可能にするはずであり、実際にリンク内の他のブロックレベルの要素をラップするのに問題はありませんでした。実際、テーブル全体に要素をラップすることはうまくいくようです。

マークアップ次のようHTML5 specから

<table> 
    <tbody> 
     <a href="#"> 
      <tr> 
       <td>25 Nov 2010</td> 
       <td>Active</td> 
      </tr> 
     </a> 
    </tbody> 
</table> 

Answer 1

：要素trを用いることができる

コンテキストた：THEAD要素の子として

• 。
• tbody要素の子として。
• tfoot要素の子として。
• テーブル要素の子として、テーブル要素の子要素であるtbody要素がない場合のみ、キャプション、colgroup、およびthead要素の後になります。

つまり、は、a要素に継承できません。 あなたの場合、代わりにJavascript onclickを使用します。または、同じアンカー要素を各行tdに配置することもできます。

これが役に立ちます。

Answer 2

なぜ使用しないでくださいdisplay: table-* CSS？それはwidely supportedだとかなりシームレスです：

HTML：

<div class="table"> 
    <div class="tbody"> 
     <a href="#" class="tr"> 
      <div class="td">25 Nov 2010</div> 
      <div class="td">Active</div> 
     </a> 
    </div> 
</div> 

CSS：[タグでのラッピングHTMLテーブルの行]の

.table { display: table; } 
.tbody { display: table-row-group; } 
.tr { display: table-row; } 
.td { display: table-cell; } 

See codepen