tr 의 크기가 줄마다 다름.
* 개요
<tr>
<td>
<span class="A">
.. 상황임.
* span.a 에는 그림이 들어가 있거나 글자가 들어갈 때도 있는데
글자가 들어갔을때만 크기가 더 커지면서 tr 의 간격을 늘렸음.
- 기본 속성
font-size: smaller;
line-height: 95%;
max-width: 70px;
형광색이 span.A 부분
'살인사건' 과 '뉴스' 의 tr 이 달라짐.
- 넘어가는 글자를 자르기 위한 부분
overflow: hidden;
white-space: nowrap;
word-wrap: normal !important;
display: inline-block;
- text-overflow: ellipsis; 는 일부러 안넣음 (말줄임표 때문에 글자가 너무 많이 잘려서 )
* 문제 : tr 의 크기는 왜 달라지는가?
* 해결안 1 - border: none; (실패)
span.a 가 inline-block 이니까 border 가 있는게 아닐까 해서 해봄.
실패
* 해결안 2 - display : inline; (실패)
tr 의 크기를 고정시키는데 성공했지만,
overflow : hidden ; 등이 적용되지 않음.
* 해결안 3 - span.A 에 height (또는 max-height) 적용
* 해결안 3 - td 에 line-height : 100%; 적용 (성공)
td 안의 span.A 가 inline으로 가지는 '글자의 높이'가 달라서 그런 것이라 추정하고 100%로 고정함.
해결됨