css - 使用一些图像创建垂直表格边框

Question

我需要为使用 tinyMCE 从 CMS 创建的表格制作一个 css 类，这样它看起来就像下面的那样。

http://i.stack.imgur.com/0xcdT.png

除了带圆圈的虚线垂直分隔符外，一切都很简单。实际上我不知道该怎么做。

这是我的自动取款机。只是一条虚线。

http://i.stack.imgur.com/Wp6M6.png

table.testclass {width: 100%; font-size: 1.3em; -webkit-border-vertical-spacing: 1px; -webkit-border-horizontal-spacing: 0px;}
 .testclass tr:first-child td:first-child{border:0px; }
 .testclass tr:first-child td:last-child{border: 0px;}
 .testclass td{ height: 50px; border-bottom: 1px; border-top: 1px; border-color: black; border-style: solid; vertical-align: middle;}
 .testclass tr td:first-child {text-align: right; border-left: 1px solid black; padding-right: 0px; border-right: 1px dashed rgba(0, 0, 0, 0.33) !important; width: 33%; padding-right: 25px; }
 .testclass tr td:last-child {text-align: left;border-right: 1px solid black; padding-left: 25px;}

这是生成的 HTML:

<table class="testclass" border="0">
 <tbody>
  <tr>
   <td>test</td>
   <td>test</td>
  </tr>
  <tr>
   <td>assdava</td>
   <td>zxcv234vbzx</td>
  </tr>
  <tr>
   <td>23dfasdfadq2</td>
   <td>sdfWFASDF</td>
  </tr>
 </tbody>
</table>

Answer 1

这是一种完全使用 CSS 和伪元素的方法。不能说它是如何交叉兼容的，但你应该试验一下，看看它是否对你来说足够灵活(基于你使用的 CSS，在 td 元素上分配高度等，它可以在正常运行的浏览器中工作) .

See the fiddle

相关代码:

.testclass, .testclass td {
    position:relative; /* allows proper positioning of absolute elements */
}

.testclass tr td:first-child:before {
    content:'';
    position:absolute;
    right:1px;
    top:18px; /* positions it at the top of the circle */
    width:1px;
    height:100px;   /* whatever you want (here is td height * 2).. but has bearing on other code */
    border-right:1px dashed #555;
}

.testclass tr td:first-child:after {
    content:'';
    position:absolute;
    right:-7px; /* width of circle/2 */
    top:18px; /* height of td - height of circle/2 */
    height:14px;
    width:14px;
    border-radius:50%; /* don't forget vendor prefixes -- makes it a circle */
    background:#fff;
    z-index:2; /* puts it on top of the vertical dashed line */
    border:1px dashed #666;
}

/* this one is the final circle below the entire table */
.testclass:after {
    content:'';
    position:absolute;
    left:33%; /* width of the left-most td element */
    margin-left:-9px;/* width of circle/2 */
    bottom:-75px; /* height of td/2 - height of :after element */
    height:14px;
    width:14px;
    border-radius:50%;
    background:#fff;
    z-index:2;
    border:1px dashed #666;
}

---

如果这不是您可以使用的方法，可以理解。对于可以在旧版浏览器中运行的内容，您确实需要使用不同的 HTML 标记。如果需要，您还可以为圆圈使用图像(这意味着不需要 border-radius)。我没有供应商前缀或任何东西......只在 chrome 中测试过。

我试图在测量结果中添加注释以解释它们是如何推导出来的。我不认为我使用了任何 magic numbers .