非圖像解決方案來繪製分層結構中的連接器

Question

我想要做的是創建一個連接器，從第二個tr到除最後一個tr之外的所有tr。這是我目前基於圖像的解決方案：

http://jsfiddle.net/DmcEB/13/

不過，我不想依靠圖像。例如，使用Unicode字符（unicode-search.net/unicode-namesearch.pl?term=bracket）。

環境：Rails的，HTML/CSS，原型

Answer 1

你可以在前面加上一個unicode box drawing element每個單元格。我更像是一個jQuery人員，但我認爲Prototype的插入或替換方法可以做到這一點。

此解決方案的唯一問題是如果您的用戶需要選擇文本。但是對於大多數瀏覽器來說，你可以用一個span來包裝字符，並使用CSS來防止選擇unicode字符。

事情是這樣的：使用:before和 http://jsfiddle.net/DmcEB/18/

（最後一個元素需要一些固定）

Answer 2

content:""你可以得到一個純CSS的解決方案。所提供的客戶端可以處理Unicode字符：

http://jsfiddle.net/ctrlfrk/DmcEB/19/

這裏是框繪製Unicode字符參考​​清單： http://en.wikipedia.org/wiki/Box_drawing_characters