用一些圖片創建垂直表格邊框

Question

我需要爲使用tinyMCE從CMS創建的表格創建一個css類，因此它看起來像下面的樣子。

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

一切都只是與cirles是虛垂直分隔符相當瑣碎。其實不知道我該怎麼做。

這是我的atm。只是一條虛線。

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。