Question

我想创建一个如下所示的表：

lolvalue --------- | lol date |其他一些列数据1

lolvalue12345 | lol date 2 |其他一些列data2

CSS / HTML中的

。基本上，有“数据”，并且有一个向右移动的填充，但不计入数据，因此它不会拉伸列，填充由最大长度行拉伸的空间。

就像那些旧的内容书中有点指引我们到正确的页面一样，还记得吗？

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

另一种方法是在软件中生成适当数量的字符，但嗯，这不会在字体和浏览器中移植。

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

Answer 1

您可以向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>

这样，您就不需要指定宽度。

Answer 2

我过去使用的一个快速欺骗是用尾随字符（如'------------------...'）填充所有字段然后用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; }

Answer 3

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中的填充背景/文本填充符？

3 个答案: