Javascript 用字符填充表行中的空白

我想使用jQuery将某些字符附加到HTML表行中，以便每一行填充特定的像素计数。我想能够右对齐或中心对齐列以及。例如：

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

---

您可以在

标记上使用重复的背景图像，然后将文本内容包装在

中，并将这些

标记的背景颜色设置为匹配其后面的任何内容

参见JSFIDLE上的工作演示

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>

---

这些特定字符是什么？可能是句号，如示例中所示。

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; }