부트스트랩 테이블안에 데이터가 튀어나오지 않게 하려면 어떻게 해야하나요?

Question

문제의 상황은 이렇습니다

테이블 밖으로 데이터가 튀어나오는데

화면 크기에 따라 테이블 안의 데이터가

자동으로 줄바꿈이되거나 해서 안튀어나갔으면 좋겠어요

div에 table-responsiv해도 이렇게 나와요..

• 

Answer 1

안녕하세요.

bootstrap의 table은 기본적으로 글자가 늘어나면 테이블이 늘어나거나 아래로 떨어지게 됩니다.

"-10,20,40,60" 이런 문자열은 띄어쓰기가 없이 숫자와 문자만 있기 때문에 하나의 단어로 취급되며, table에 별도의 css가 적용되었을 가능성이 있습니다.

적용된 css 방법이 여러가지인데 아마도 table {table-layout: fixed} 이나 td {white-space: nowrap} 같이 적용되었을 가능성이 있습니다.

# td에 적용해야 하며 td {word-break: break-all;} # 별도로 css가 적용된 것보다 우선순위가 높게 class로 지정해야 할 수도 있습니다. .테이블클래스 {word-break: break-all;} # 위처럼 해도 적용이 안되는 경우 td 태그에 직접 테스트 해보시기 바랍니다. ... <td style="word-break: break-all;} ...

Answer 2

CSS 속성중 아래를 적용해보세요~

공백 줄바꿈문자 처리방법 (띄어쓰기나 줄바꿈으로 이한 공백부분 등)
white-space:normal;

normal이 기본값입니다.

비슷한 속성중 word-break도 한번해보세요 텍스트가 들어가는 블록요소 넓이에 맞춰 줄바꿔줍니다~~

Answer 3

아래 링크를 따라서 수정하시면 될 것 같습니다.

http://www.ministory.net/xe/?mid=it_story&category=2963&page=6&document_srl=4296

**강제로 줄바꿈(특수문자제외) style="word-break:break-all"

**강제로 줄바꿈(특수문자포함) style="word-wrap:break-word"

**줄바꿈 못하도록 nowrap

**영문, 한글 한줄로 나오는 것 강제 줄바꿈 : word-wrap:break-word;word-break:break-all