source

단일 셀이 아닌 테이블 셀의 열에서 줄 바꿈을 방지하는 방법은 무엇입니까?

lovecheck 2023. 8. 25. 23:43
반응형

단일 셀이 아닌 테이블 셀의 열에서 줄 바꿈을 방지하는 방법은 무엇입니까?

단일 셀이 아닌 테이블 열에서 자동 줄 바꿈을 방지하려면 어떻게 해야 합니까?

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

반응형