table要素 CSS 桁揃え

aa 123.45
bb 12
cc 12345.0932
dd 1

HTML

<table border="1">
<tbody>
	<tr>
		<td>aa</td>
		<td class="num i3">123.45</td>
	</tr>
	<tr>
		<td>bb</td>
		<td class="num i0">12</td>
	</tr>
	<tr>
		<td>cc</td>
		<td class="num i5">12345.0932</td>
	</tr>
	<tr>
		<td>dd</td>
		<td class="num i0">1</td>
	</tr>
</tbody>
</table>

CSS

.num{
 font-family:monospace;
 text-align:right;
 padding-left:1ex;
 padding-right:1ex;
}
.i0{
 padding-right:6.5ex}
.i1{
 padding-right:5ex}
.i2{
 padding-right:4ex}
.i3{
 padding-right:3ex}
.i4{
 padding-right:2ex}
.i5{

htmlで、数値を小数点で位置を揃える方法


新着記事

コメントは受け付けていません。