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

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

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입니다!

그냥 추가

style="white-space:nowrap;"

예:

<table class="blueTable" style="white-space:nowrap;">
   <tr>
      <td>My name is good</td>
    </tr>
 </table>

이를 수행하는 몇 가지 방법이 있습니다. 그들 중 누구도 쉽고 분명한 방법은 아닙니다.

공백을 적용 : 지금 <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내가 믿는 속성은 지원되지 않습니다. 위의 방법이 선호됩니다.

<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 스타일입니다.

텍스트에 일반 공백 대신 끊지 않는 공백을 넣으십시오. 우분투에서는 (Compose Key) -space-space 로이 작업을 수행합니다.

전체 테이블에 적용하려면 table태그 내에 배치하면됩니다 .

<table style="white-space:nowrap;">