단일 셀이 아닌 테이블 셀의 열에서 줄 바꿈을 방지하는 방법은 무엇입니까?
단일 셀이 아닌 테이블 열에서 자동 줄 바꿈을 방지하려면 어떻게 해야 합니까?
CSS 스타일의 공백을 사용할 수 있습니다.
white-space: nowrap;
완료를 위해:
#table_id td:nth-child(2) {white-space: nowrap;}
의 2열에 스타일을 적용하는 데 사용됩니다.the table_id
테이블.
이것은 모든 주요 브라우저에서 지원됩니다. IE는 IE9 이후부터 이를 지원하기 시작했습니다.
그냥 추가
style="white-space:nowrap;"
예:
<table class="blueTable" style="white-space:nowrap;">
<tr>
<td>My name is good</td>
</tr>
</table>
nowrap 스타일을 사용합니다.
<td style="white-space:nowrap;">...</td>
CSS야!
이를 위한 몇 가지 방법이 있습니다. 그 중 어느 것도 쉽고 명백한 방법은 아닙니다.
공백 적용:이제 에 랩<col>
작동하지 않습니다. 4개의 CSS 속성만 작동합니다.<col>
요소 - 배경색, 너비, 테두리 및 가시성.IE7 및 이전 버전에서는 모든 속성을 지원했지만, 이는 이상한 테이블 모델을 사용했기 때문입니다.IE8은 이제 다른 모든 사람들과 일치합니다.
그렇다면, 어떻게 이것을 해결할 수 있을까요?
IE(IE8 포함)를 무시할 수 있다면 다음을 사용할 수 있습니다.:nth-child()
특정 항목을 선택할 의사 클래스<td>
각 행의 s.사용할 수 있습니다.td:nth-child(2) { white-space:nowrap; }
(이 예에서는 사용할 수 있지만 행 범위 또는 콜 범위가 관련된 경우 중단됩니다.)
만약 당신이 IE를 지원해야 한다면, 당신은 먼 길을 가서 모든 사람들에게 수업을 적용해야 합니다.<td>
당신이 영향을 끼치고 싶은 것.형편없지만, 그들은 휴식 시간입니다.
장기적으로, CSS에서 이러한 부족함을 해결하여 한 열의 모든 셀에 스타일을 더 쉽게 적용할 수 있도록 제안합니다.당신은 다음과 같은 것을 할 수 있을 것입니다.td:nth-col(2) { white-space:nowrap; }
당신이 원하는 대로 해줄 겁니다
<td style="white-space: nowrap">
그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인 공백 속성의 사용 예이며, 파란색 테이블은 테이블의 클래스이고, 테이블 아래는 CSS 스타일입니다.
텍스트에 보통 공백 대신 구분하지 않는 공백을 넣습니다.Ubuntu에서는 (Compose Key)-space-space로 이 작업을 수행합니다.
전체 테이블에 적용하려면 테이블 내에 배치할 수 있습니다.table
태그:
<table style="white-space:nowrap;">
언급URL : https://stackoverflow.com/questions/1893751/how-to-prevent-line-break-in-a-column-of-a-table-cell-not-a-single-cell
'source' 카테고리의 다른 글
Liquibase generateChangeLog maria에 누락된 열 문이 있습니다.DB (0) | 2023.08.25 |
---|---|
관련 tnsnames.ora 파일의 위치 확인 (0) | 2023.08.25 |
확인란이 선택되지 않은 경우 선택 - jQuery를 클릭합니다. (0) | 2023.08.20 |
CSS 미디어 쿼리를 사용하여 장치 방향을 탐지하는 방법은 무엇입니까? (0) | 2023.08.20 |
MVC 컨트롤러에서 개체 목록과 함께 JsonResult 반환 (0) | 2023.08.20 |