用字符填充表格行中的空白区域

Question

我想使用jQuery将某些字符附加到HTML表行,以便每行填充一定的像素数.我希望能够右对齐或居中对齐列.例如:

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

Answer 1

您可以在<td>标签上使用重复的背景图像,然后将文本内容包装在a中,<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; }