th < td

td의 문자/숫자가 길어 text-overflow: elipsis를 걸고, resize를 하고자 할 경우

th는 width값을 주고, td에는 모두 max-width(th보다 작은 값을 주어야 함)값을 주면 최초 사이즈는 th의 값으로 보여지고, th에서 resize가 가능하며, resize축소 시, td값에 있는 max-width값까지 줄여진다. 단 한 cell이라도 max-width가 지정되어 있지 않으면, 해당 cell의 문자/숫자 크기까지만 줄일 수 있다.

1: width
2, 3, 4: max-width
5: 지정안함

이 경우 resize 시 5가 2, 3, 4보다 크면 5의 사이즈까지만 줄일 수 있음

thead {
white-space: wrap;
}
tbody {
white-space: nowrap;
}
th, td {
overflow: hidden;
text-overflow: ellipsis;
}

th {
width: 112px
}
td {
width: 64px
}

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *