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

问题描述：

我想创建一个表，看起来像这样：在CSS填充背景/文字填充？

lolvalue --------- |笑日期|一些列数据1

lolvalue12345 |笑日期2 |某些其他列数据2

in CSS/HTML。基本上，有“数据”，有一个填充符向右移动，但不算作数据，因此它不会拉伸列，填充由最大长度行拉伸的空间。

这就像在那里有圆点指导我们正确的页面那些老书的内容，还记得吗？

我该怎么做？没有像“padding-backgrond”这样的属性。我可以通过仅为一列使用图层来创建此图层，但是，如何确定图层的宽度？

另一种方法是生成软件中的字符适量，但嗯，那会不会是可跨字体和浏览器。

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

答

你可以添加一个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>

这样一来，你就不会需要分配的宽度。

答

我已经在过去使用的快速作弊淹没所有的拖尾字符的字段（如“------------------...”）然后用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; }

虽然这工作，我认为这是一个坏主意，弄脏这种类型的演示数据的内容时，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>

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

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

相关推荐