javascript - 如何在单个响应列中排列 "prices"，点数取决于文本的长度

Question

我试过这段代码，但没有给出解决方案。不使用引导表。我如何管理每项服务的点数。价格如何出现在适当的列中以及点数如何自动管理。

<table class="table table-hover">
<thead >
  <tr>
    <th>Title</th>
    <th>Rates</th>
  </tr>
</thead>
<tbody>
  <tr>
     <td >Federal Incorporation (for profit corporation)......... </td>
     <td class="">$675.00</td>
  </tr>
  <tr>
     <td>Nonprofit Incorporation</td>
     <td>...........................................</td>
     <td>$975.00</td>
  </tr>
  <tr>
     <td>Registering Business Name  Master Business License </td>
     <td>$225.00</td>
  </tr>
  <tr>
     <td>Shareholder’s Agreement</td>
     <td>$1450.00</td>
  </tr>
  <tr>
     <td>Registering Business Name Master Business License </td>
     <td>$225.00</td>
  </tr>
  <tr>
     <td>Registering Business Name btaining Master Business License</td>
     <td>$225.00</td>
  </tr>
</tbody>
</table>

Answer 1

你可以试试伪边距和负边距:

td {
  overflow:hidden;
}
td:first-child:after {
  content:'';
  display:inline-block;
  width:100%;
  margin-right:-100%;
  border-top:dotted;
}

<table class="table table-hover">
  <thead>
    <tr>
      <th>Title</th>
      <th>Rates</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Federal Incorporation (for profit corporation) </td>
      <td>$675.00</td>
    </tr>
    <tr>
      <td>Nonprofit Incorporation</td>
      <td>$975.00</td>
    </tr>
    <tr>
      <td>Registering Business Name Master Business License </td>
      <td>$225.00</td>
    </tr>
    <tr>
      <td>Shareholder’s Agreement</td>
      <td>$1450.00</td>
    </tr>
    <tr>
      <td>Registering Business Name Master Business License </td>
      <td>$225.00</td>
    </tr>
    <tr>
      <td>Registering Business Name btaining Master Business License</td>
      <td>$225.00</td>
    </tr>
  </tbody>
</table>

codepen 一起玩:http://codepen.io/gc-nomade/pen/dvJRgY