Div-（表格）布局在被链接包围时中断

Question

我遇到了问题，我花了很多时间来解决这个问题，所以我想问你是否对我有所了解。

我制作了Div-Table-Layout，现在一切都还不错。

现在我想用css Style制作一整行可点击并在第一行尝试以下内容：

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

当我这样做时，列不像我输入a-tag之前那么宽。

有没有办法做到这一点？

<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

只需删除div标签并将divTableRow添加到anchortag ... 希望这会对你有帮助..

.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>

Answer 2

我想你可能会以错误的方式解决这个问题。我真的认为你只需要创建一个 html表（因为这看起来非常像表格数据）并且只是在表格单元格中有链接。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;