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标记。如果需要，您还可以使用圆形图像（这意味着不需要边界半径）。我没有供应商前缀或任何东西......只在chrome中测试过。

我尝试在测量中添加注释来解释它们是如何派生出来的。我认为我没有使用任何magic numbers。

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

1 个答案: