「価格」を1つの応答列に配置する方法は、ドットの数はテキストの長さに依存します

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

あなたは擬似と負のマージンを持って試してみることができます。一緒にプレイするcodepen

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>

：http://codepen.io/gc-nomade/pen/dvJRgY