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>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</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{

.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で、数値を小数点で位置を揃える方法

CSS note

table要素 CSS 桁揃え

HTML

CSS

新着記事