단일 셀이 아닌 테이블 셀의 열에서 줄 바꿈을 방지하는 방법은 무엇입니까?
단일 셀이 아닌 테이블 열에서 자동 줄 바꿈을 방지하려면 어떻게해야합니까?
CSS 스타일 공백을 사용할 수 있습니다.
white-space: nowrap;
완성을 위해 :
#table_id td:nth-child(2) {white-space: nowrap;}
the table_id
테이블 의 2 열에 스타일을 적용하는 데 사용됩니다 .
이것은 모든 주요 브라우저에서 지원되며 IE는 IE9부터 이것을 지원하기 시작했습니다.
nowrap 스타일을 사용하십시오.
<td style="white-space:nowrap;">...</td>
CSS입니다!
이를 수행하는 몇 가지 방법이 있습니다. 그들 중 누구도 쉽고 분명한 방법은 아닙니다.
공백을 적용 : 지금 <col>
은 작동하지 않습니다; <col>
배경색, 너비, 테두리 및 가시성 요소 에는 4 가지 CSS 속성 만 작동 합니다. IE7 및 이전 버전은 모든 속성을 지원하는 데 사용되었지만 이상한 테이블 모델을 사용했기 때문입니다. IE8은 이제 다른 모든 사람과 일치합니다.
그렇다면 어떻게 해결할 수 있습니까?
IE (IE8 포함)를 무시할 수 있다면 :nth-child()
의사 클래스를 사용하여 <td>
각 행에서 특정을 선택할 수 있습니다 . 을 사용 td:nth-child(2) { white-space:nowrap; }
합니다. (이 예제에서는 작동하지만 행 간격이나 colspan이 있으면 중단됩니다.)
IE를 지원해야한다면 먼 길을 가고 <td>
영향을 줄 모든 것에 클래스를 적용해야합니다 . 그것은 짜증나지만 그들은 휴식이다.
장기적으로 CSS에서 이러한 부족을 해결하기위한 제안이 있으므로 열의 모든 셀에 스타일을보다 쉽게 적용 할 수 있습니다. 당신은 같은 td:nth-col(2) { white-space:nowrap; }
것을 할 수 있고 당신이 원하는 것을 할 것입니다.
<td style="white-space: nowrap">
nowrap
내가 믿는 속성은 지원되지 않습니다. 위의 방법이 선호됩니다.
그냥 추가
style="white-space:nowrap;"
예:
<table class="blueTable" style="white-space:nowrap;">
<tr>
<td>My name is good</td>
</tr>
</table>
텍스트에 일반 공백 대신 끊지 않는 공백을 넣으십시오. 우분투에서는 (Compose Key) -space-space 로이 작업을 수행합니다.
전체 테이블에 적용하려면 table
태그 내에 배치하면됩니다 .
<table style="white-space:nowrap;">
<table class="blueTable">
<tr>
<td>My name is good</td>
</tr>
</table>
<style>
table.blueTable td,
table.blueTable th {
white-space: nowrap;
/* non-question related further styling */
border: 1px solid #AAAAAA;
padding: 3px 2px;
text-align: left;
}
</style>
이것은 nowrap 값을 가진 공백 속성의 사용 예이며, bluetable은 테이블의 클래스이며, 테이블 아래는 CSS 스타일입니다.
'development' 카테고리의 다른 글
치명적인 오류 : 'ZipArchive'클래스를 찾을 수 없습니다. (0) | 2020.06.11 |
---|---|
CSS에서 "보다 큼"또는 ">"문자는 어떻게 사용됩니까? (0) | 2020.06.11 |
moment.js에서 RFC2822 날짜를 변환하려고 할 때“사용 중단 경고 : 모멘트 생성이 js 날짜로 되돌아 감 (0) | 2020.06.11 |
Bash에서 두 목록의 교차 (0) | 2020.06.11 |
모양 xml의 테두리 (0) | 2020.06.11 |