html - 应用于 TD 时垂直虚线边框不均匀

Question

有没有办法将垂直虚线边框应用于 <td>没有他们(边界)合并？我说的是附图上的东西——有 3 个 <tr>这里的元素，每个元素包含 2 <td>的。如果我申请 border-right: 1px dashed black到 <td> ，这是何等的得到。 <tr> 之间显然有更长的一行的:

当然，这是合乎逻辑的，因为边框应用于 <td> :

.standard_table td {
    padding: 20px;
    text-align: center;
    border-right: 1px dashed #1d1d1d;
}
.standard_table td:last-child {
    text-align: justify;
    border-right: none;
}

有人知道如何在没有额外标记的情况下消除较长的线并保持虚线统一吗？我怀疑这是可能的，但肯定有比我更熟练的人，所以值得一试。

Answer 1

您可以尝试使用 col 元素:

td {
  padding:1em;
  width:100px;
  }
tr {
  border-bottom:1px solid lightgray
}
col {
  background:linear-gradient(
    to top, 
    black 60%, 
    transparent 60%, 
    transparent ) repeat-y;
  background-size:2px 12px;
}
table {
  margin:auto;
  border-collapse:collapse;
  border:dashed 2px;
  border-left:none;
}
col:nth-child(odd), tr:nth-child(odd) {/*  demo purpose for <col> use */
  background-color:rgba(0,0,0,0.2);
  }

<table>
  <colgroup>
    <col/>
    <col/>
    <col/>
  </colgroup>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td<br/>line 2</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
</table>

取自linear-gradient + background-size 和repeat-y/x

否则，border on col ，这显然只适用于 Firefox

http://codepen.io/gc-nomade/pen/xbjwLE