異なる長さのHtmlで文字列を整列する

Question

Html段落の中では、コロンを異なる行に整列させるために文字列を構成する必要があります（当然モノスペースのフォントを使用しています）。

ShortString  : 1.0 
LoooongString : 2.0 
VeryloooongString: 3.0 

コロンの前に固定幅を設定する必要があります。この幅は、3つの文字列の最大値です。

Answer 1

ここには、tableと最小限のスタイルを使用した簡単な例があります。

.data { 
 
    font-family: monospace; 
 
} 
 

 
.data td:last-child:before { 
 
    content: ': ' 
 
}

<table class="data"> 
 
    <tr> 
 
    <td>ShortString</td> 
 
    <td>1.0</td> 
 
    </tr> 
 
    <tr> 
 
    <td>LoooongString</td> 
 
    <td>2.0</td> 
 
    </tr> 
 
    <tr> 
 
    <td>VeryloooongString</td> 
 
    <td>3.0</td> 
 
    </tr> 
 
</table>