Заполните пустое место в строках таблицы символами

Question

Я хотел бы добавить определенные символы в строку таблицы HTML с помощью jQuery, чтобы каждая строка заполняла определенное количество пикселей.Я хотел бы иметь возможность выравнивать столбцы по правому краю или по центру.Например:

Header        Header2     Header3
something.......foo...........baz
another........abcde.........html

Answer 1

Вы можете использовать повторяющееся фоновое изображение для тега <td>, а затем обернуть текстовое содержимое в <span> и установить цвет фона этих тегов <span>, чтобы он соответствовал тому, что находится за ним.

См. Рабочую демонстрацию на jsFiddle
http://jsfiddle.net/gDtYz/1/

HTML

<table>
  <tr>
      <th>Header</th>
      <th>Header2</th>
      <th>Header3</th>
  </tr>
  <tr>
      <td><span>something</span></td>
      <td><span>foo</span></td>
      <td><span>baz</span></td>
  </tr>
  <tr>
      <td><span>another</span></td>
      <td><span>abcde</span></td>
      <td><span>html</span></td>
  </tr>
</table>

CSS

table {
    width: 350px;
    background: #fff; 
    font-family: sans-serif;
}

th { font-weight: bold; text-align: center; }
td {
    background: transparent 
                url("http://nontalk.s3.amazonaws.com/dots.png") 
                repeat-x 0 75%; 
    height: 14px;
    font-size: 14px;
    vertical-align: bottom;
    text-align: center;
}

td span {
    background: #fff; 
    line-height: 18px;
    height: 18px;
    display: inline-block;
    padding: 0 4px;
}

th:first-child,
td:first-child { text-align: left; }

td:first-child span { padding: 0 4px 0 0; }

th:last-child,
td:last-child { text-align: right; }

td:last-child span { padding: 0 0 0 4px; }