Padding-фон / текстовый наполнитель в CSS?

Question

Я хотел бы создать таблицу, которая выглядит следующим образом:

---

lolvalue --------- | lol date | некоторые другие данные столбца 1

lolvalue12345 | дата lol 2 | некоторые другие данные столбца2

---

в 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:
.extendo { background: url(dot.gif) 0 0 repeat-x; width: 100px; }
.words { background: none; }

markup:

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

вам может потребоваться указать отступ или альтернативный фон

Answer 3

Быстрый чит, который я использовал в прошлом, это заполнить все поля последними символами (например, «------------------...») и затем скрыть переполнение с помощью 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; }