테이블 셀의 텍스트 랩핑 방지 방법

테이블 셀의 텍스트 랩핑 방지 방법

테이블 셀에 있는 텍스트가 포장되지 않도록 하려면 어떻게 해야 하는지 아는 사람이 있습니까?이것은 표의 머리글을 위한 것이고, 표제는 그 아래의 데이터보다 훨씬 길지만, 한 줄에만 표시하려면 표제가 필요합니다.열이 매우 넓어도 괜찮습니다.

내 (간체) 테이블의 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페이지의 자바스크립트와 관련된 이유로 태그를 지정합니다.

표제가 여러 줄로 묶여서 나오고 있습니다.이는 브라우저가 수평 스크롤을 피하려고 하기 때문에 테이블이 충분히 넓을 때에만 발생하는 것으로 보입니다.하지만 저 같은 경우는 가로 스크롤을 원합니다.

무슨 생각 있어요?

다음과 같이 사용되는 부동산을 살펴봅니다.

th {
    white-space: nowrap;
}

이것은 강제로 다음의 내용을 할 것입니다.<th>한 줄에 표시할 수 있습니다.

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

보통의
이 값은 사용자 에이전트가 공백 시퀀스를 접고 줄 상자를 채우기 위해 필요에 따라 줄을 끊도록 지시합니다.

미리
이 값은 사용자 에이전트가 공백 시퀀스를 접는 것을 방지합니다.보존된 줄 문자에서만 줄이 끊어집니다.

노랩
이 값은 'normal'의 경우 공백을 축소하지만 텍스트 내 줄 바꿈을 억제합니다.

사전의
이 값은 사용자 에이전트가 공백 시퀀스를 접는 것을 방지합니다.보존된 새 줄 문자에서 줄이 끊어지고 필요에 따라 줄 상자를 채웁니다.

선을 긋는
이 값은 사용자 에이전트가 공백 시퀀스를 접도록 지시합니다.보존된 새 줄 문자에서 줄이 끊어지고 필요에 따라 줄 상자를 채웁니다.

<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>

참조:

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

https://caniuse.com/ ?search=nobr

반응/소재 UI와 함께 사용

React에서 빌드할 때 Material UI가 어떻게 작동하는지 궁금하신 경우에는 다음과 같이 추가합니다.<TableHead>구성요소:

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

언급URL : https://stackoverflow.com/questions/300220/how-to-prevent-text-in-a-table-cell-from-wrapping