표 셀의 텍스트가 줄 바꿈되지 않도록하는 방법

누구든지 표 셀의 텍스트가 줄 바꿈되는 것을 방지하는 방법을 알고 있습니까? 이것은 테이블의 헤더에 대한 것이며 제목은 그 아래의 데이터보다 훨씬 길지만 한 줄에만 표시해야합니다. 기둥이 매우 넓 으면 괜찮습니다.

내 (간체 화 된) 테이블의 HTML은 다음과 같습니다.

<table>
  <thead>
    <tr>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
    </tr>
  </tbody>
</table>

페이지 자체 th의 자바 스크립트와 관련된 이유로 제목 자체가 태그 내부의 div에 래핑됩니다 .

제목이 여러 줄로 줄 바꿈되어 표가 나옵니다. 브라우저가 가로 스크롤을 피하려고 시도하기 때문에 테이블이 충분히 넓은 경우에만 발생합니다. 제 경우에는 가로 스크롤을 원합니다.

어떤 아이디어?

다음 white-space과 같은 속성을 살펴보십시오 .

th {
    white-space: nowrap;
}

이렇게하면 내용이 <th>한 줄에 표시됩니다.

링크 된 페이지에서 다음에 대한 다양한 옵션이 있습니다 white-space.

normal
이 값은 사용자 에이전트가 일련의 공백을 축소하고 줄 상자를 채우는 데 필요한대로 줄을 바꿉니다.

pre
이 값은 사용자 에이전트가 공백 시퀀스를 접는 것을 방지합니다. 줄 바꿈 문자 만 유지하면 줄이 끊어집니다.

nowrap
이 값은 'normal'에서와 같이 공백을 축소하지만 텍스트에서 줄 바꿈을 억제합니다.

사전 줄 바꿈
이 값은 사용자 에이전트가 일련의 공백을 접는 것을 방지합니다. 줄 바꿈 문자는 유지되며 줄 상자를 채우는 데 필요합니다.

pre-line
이 값은 사용자 에이전트가 일련의 공백을 축소하도록 지시합니다. 줄 바꿈 문자는 유지되며 줄 상자를 채우는 데 필요합니다.

<th nowrap="nowrap">

또는

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

또는

<th class="nowrap">
<style type="text/css">
.nowrap { white-space: nowrap; }
</style>

최소한 두 가지 방법이 있습니다.

"td"태그 안에 nowrap 속성을 사용하십시오 :

<th nowrap="nowrap">Really long column heading</th>

단어 사이에 깨지지 않는 공백을 사용하십시오.

<th>Really&nbsp;long&nbsp;column&nbsp;heading</th>

하이픈에서 텍스트 줄 바꿈을 방지 해야하는이 질문에 왔습니다.

이것이 내가 한 방법입니다.

<td><nobr>Table Text</nobr></td>

참고:

모든 브라우저에서 하이픈에서 줄 바꿈을 방지하는 방법

React / Material UI와 함께 사용

React에서 빌드 할 때 머티리얼 UI에서 이것이 어떻게 작동하는지 궁금한 경우, <TableHead>컴포넌트에 추가하는 방법은 다음과 같습니다.

<TableHead style={{ whiteSpace: 'nowrap'}}>