如何在单个响应列中排列“价格”，点数取决于文本的长度

Question

我已经尝试过这段代码，但这并没有给出解决方案。不使用bootstrap表。我怎么能管理每项服务的点数。价格如何在适当的列中显示，并且可以自动管理点数。

<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