在CSS填充背景/文字填充？

我想創建一個表，看起來像這樣：在CSS填充背景/文字填充？

lolvalue --------- |笑日期|一些列數據1

lolvalue12345 |笑日期2 |某些其他列數據2

in CSS/HTML。基本上，有「數據」，有一個填充符向右移動，但不算作數據，因此它不會拉伸列，填充由最大長度行拉伸的空間。

這就像在那裏有圓點指導我們正確的頁面那些老書的內容，還記得嗎？

我該怎麼做？沒有像「padding-backgrond」這樣的屬性。我可以通過僅爲一列使用圖層來創建此圖層，但是，如何確定圖層的寬度？

另一種方法是生成軟件中的字符適量，但嗯，那會不會是可跨字體和瀏覽器。

我使用Ruby on Rails作爲服務器端，如果它有所作爲。

來源

2009-01-27 mannicken

你可以添加一個background-image您td，敷用內聯元素內的文本，如span和風格，與background-color：

<style type="text/css"> 
    td  { background:url(dot.gif) 0 0 repeat-x; } 
    td span { background-color:#fff; } 
</style> 

<table> 
    <tr> 
    <td><span>loltext</span></td> 
    <td>loldate</td> 
    </tr> 
    <tr> 
    <td><span>lolvalue12345</span></td> 
    <td>lol date</td> 
    </tr> 
</table>

這樣一來，你就不會需要分配的寬度。

來源

2009-01-27 19:48:17 assplecake

我已經在過去使用的快速作弊淹沒所有的拖尾字符的字段（如「------------------...」）然後用css隱藏溢出。

<table> 
    <tr> 
     <td>lolvalue------------------------------------</td> 
     <td>lol date</td> 
    </tr> 
    <tr> 
     <td>lolvalue12345-------------------------------</td> 
     <td>lol date</td> 
    </tr> 
</table>

再搭配風格吧：

td { width:50px; overflow:hidden; }

來源

2009-01-27 19:33:24

雖然這工作，我認爲這是一個壞主意，弄髒這種類型的演示數據的內容時，CSS的解決方案上面會做同樣的事情。 – Birk 2009-01-27 22:20:14

css: 
.extendo { background: url(dot.gif) 0 0 repeat-x; width: 100px; } 
.words { background: none; } 

markup: 

<div class="extendo"><span class="words">lalala</span></div>

您可能需要指定填充或替代的背景

來源

2009-01-28 01:44:05

在CSS填充背景/文字填充？

回答

相關問題