0

我需要为使用 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>
4

1 回答 1

1

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

看小提琴

相关代码：

.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 中测试。

我试图在测量中添加注释以解释它们是如何得出的。我不认为我使用了任何神奇的数字。

于 2013-07-23T14:07:38.900 回答