table cell 안에 가로 숫자 바를 넣고 싶다.

div 안의 div의 넓이를 조절해서 바를 표현한다.

여기까지는 아무런 문제가 없다.

그런데 바를 우측 정렬을 하고 싶다면 문제가 발생한다.


<!doctype html>
<html>
<head>
<style>
table {
width : 20rem;
border-collapse: collapse;
}
td {
border : 1px solid black;
height : 1.3rem;
text-align : center;
}

td:nth-of-type(1) {
width : 33.3%;
}
td:nth-of-type(2) {
width : 33.3%;
}
td:nth-of-type(3) {
width : 33.3%;
}

.depthBar {
text-align : left;
padding : 3px 5px;
}
.depthBar > div {
display : inline-block;
line-height: 1rem;
width : 2%;
background-color: blue;
overflow: visible;
}

</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td><div class="depthBar"><div>12345</div></div></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><div class="depthBar"><div>1234</div></div></td>
</tr>
</table>
</body>
</html>


우측정렬이라서 글자를 우측에서 우측부터 찍을 줄 알았다.

그러나 글자는 우측 끝을 맞추려고 시도할 뿐

좌측부터 찍힌다.

즉 공간이 충분하지 않으면 좌측으로 튀어나가는 것이 아니라 우측으로 튀어나간다.

어찌보면 당연한 것 같기도 하지만

우측정렬을 했는데 글자가 우측으로 튀어나가길 바라는 사람이 있을까?


바안에 글자를 넣어서 해결하려는 게으름이 애초부터 잘못된 개념이라고 생각할 수도 있다.

하지만 이런 게으른 발상이 코드양을 줄려준다면 좋은 것 아닌가?


물론 이 문제는 다른 방향으로 좀 더 설정을 많이 해주면 해결 된다.




+ Recent posts