应用于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元素：

＆＃13;

＆＃13;

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);
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

否则，col上的边框，显然只适用于Firefox

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