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>
우측정렬이라서 글자를 우측에서 우측부터 찍을 줄 알았다.
그러나 글자는 우측 끝을 맞추려고 시도할 뿐
좌측부터 찍힌다.
즉 공간이 충분하지 않으면 좌측으로 튀어나가는 것이 아니라 우측으로 튀어나간다.
어찌보면 당연한 것 같기도 하지만
우측정렬을 했는데 글자가 우측으로 튀어나가길 바라는 사람이 있을까?
바안에 글자를 넣어서 해결하려는 게으름이 애초부터 잘못된 개념이라고 생각할 수도 있다.
하지만 이런 게으른 발상이 코드양을 줄려준다면 좋은 것 아닌가?
물론 이 문제는 다른 방향으로 좀 더 설정을 많이 해주면 해결 된다.