Div-（テーブル）リンクで囲まれたときにレイアウトが破損する

Question

問題があり、これを解決するのに何時間も掛かってしまったので、私に考えがあるかどうか質問したいと思っていました。

私はDiv-Table-Layoutを作成しました。

今、私はちょうどCSSスタイルで行全体をクリック可能にしたいと最初の行に次のように試してみました：私はこれを行うと、私が入る前

<a><tr><td></td></tr></a> 

、列は同じ幅としてではありませんaタグ。

これを行う方法はありますか？

<div class="divTable"> 
    <div class="divTableBody"> 
    <a href="#" class="divTableRow"> 
     <div class="col-xs-2 divTableCell">21</div> 
     <div class="divTableCell divTableCellRight col-xs-10">Test</div> 
    </a> 
    <div class="divTableRow"> 
     <div class="col-xs-2 divTableCell ">21</div> 
     <div class="divTableCell divTableCellRight col-xs-10">Test</div> 
    </div> 
    <div class="divTableRow"> 
     <div class="col-xs-2 divTableCell ">21</div> 
     <div class="divTableCell divTableCellRight col-xs-10">Test</div> 
    </div> 
    </div> 
</div> 

https://jsfiddle.net/9b905xry/2/

Answer 1

私はあなたがこのことについて、私は怖い間違った道を進んでするかもしれないと思います。私は実際にhtmlテーブル（これは表形式のデータに非常に似ているため）を作成する必要があると思って、単にテーブルセルにリンクを持っています。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<table class="table"> 
 
    <tr> 
 
     <td><a href="#">21</a></td> 
 
     <td><a href="#">Test</a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="#">21</a></td> 
 
     <td><a href="#">Test</a></td> 
 
    </tr> 
 
</table>

Answer 2

だけで、...これは

.divTable { 
 
    display: table; 
 
    width: calc(100% - 30px); 
 
    margin: 15px; 
 
} 
 

 
.divTableRow { 
 
    display: table-row; 
 

 
} 
 

 
.divTableRow:nth-of-type(odd) { 
 
    background: #e0e0e0; 
 
} 
 

 
.divTableRow:nth-of-type(even) { 
 
    background: #FFFFFF; 
 
} 
 

 
.divTableHeading { 
 
    background-color: #EEE; 
 
    display: table-header-group; 
 
} 
 

 
.divTableCell, 
 
.divTableHead { 
 
    height: 96px; 
 
    display: table-cell; 
 
    padding: 1em; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    float: none; 
 
} 
 

 
.divTableCellLeft { 
 
    text-align: center; 
 
} 
 

 
.divTableCellRight { 
 
    text-align: left; 
 
} 
 

 
.divTableHeading { 
 
    background-color: #EEE; 
 
    display: table-header-group; 
 
    font-weight: bold; 
 
} 
 

 
.divTableFoot { 
 
    background-color: #EEE; 
 
    display: table-footer-group; 
 
    font-weight: bold; 
 
} 
 

 
.divTableBody { 
 
    display: table-row-group; 
 
}

<div class="divTable"> 
 
    <div class="divTableBody"> 
 
    <a href="" class="divTableRow"> 
 
     <div class="col-xs-2 divTableCell">21</div> 
 
     <div class="divTableCell divTableCellRight col-xs-10">Test</div> 
 
     </a> 
 
    <div class="divTableRow"> 
 
     <div class="col-xs-2 divTableCell ">21</div> 
 
     <div class="divTableCell divTableCellRight col-xs-10">Test</div> 
 
    </div> 
 
    <div class="divTableRow"> 
 
     <div class="col-xs-2 divTableCell ">21</div> 
 
     <div class="divTableCell divTableCellRight col-xs-10">Test</div> 
 
    </div> 
 
    </div> 
 
</div>