HTML 组合两个 的边框

Question

我有一个表有多个 <a>内的元素:

.TableClass td {
  background-color: #050;
  height: 150px;
}

.TableClass a {
  background-color: #f00;
  width: 100px;
  height: 100px;
  display: block;
  border: 5px solid #000;
}

<div class="TableClass">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <a href="#"></a>
      </td>
      <td>
        <a href="#"></a>
      </td>
    </tr>
  </table>
</div>

fiddle :https://jsfiddle.net/p937jbee/1/

有没有办法避免双边框？

更新:我无法更改 HTML 代码并且有多个 <td>而不是我的示例中的 2 个。

Answer 1

这里是多个单元格的解决方案:

除第一个单元格外，您需要将所有单元格的左边框归零

.TableClass tr td:not(:first-child) a {
  border-left: 0;
}

看看片段

.TableClass td
{
   background-color: #005500;
   height: 150px;
}
.TableClass a
{
 background-color: #ff0000;
 width: 100px;
 height: 100px;
 display: block;
 border: 5px solid #000000;
}
.TableClass tr td:not(:first-child) a {
  border-left: 0;
}

<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
  <td> 
  <a href="#"></a>
  </td>
  <td>
     <a href="#"></a>    
  </td>
  <td> 
  <a href="#"></a>
  </td>
  <td>
     <a href="#"></a>    
  </td>
</tr>
</table>
</div>

https://jsfiddle.net/54o0efuv/