วิธีป้องกันข้อความในเซลล์ตารางจากการตัดคำ

ไม่มีใครรู้วิธีที่ฉันสามารถป้องกันข้อความในเซลล์ตารางจากการห่อ? นี่เป็นส่วนหัวของตารางและหัวเรื่องนั้นยาวกว่าข้อมูลที่อยู่ใต้ตาราง แต่ฉันต้องการให้แสดงเพียงบรรทัดเดียว ไม่เป็นไรถ้าคอลัมน์กว้างมาก

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>

ส่วนหัวของตัวเองถูกรวมอยู่ใน div ภายในthแท็กด้วยเหตุผลที่เกี่ยวข้องกับจาวาสคริปต์ในหน้า

ตารางกำลังออกมาพร้อมกับส่วนหัวที่ตัดลงบนหลายบรรทัด สิ่งนี้ดูเหมือนว่าจะเกิดขึ้นเมื่อโต๊ะกว้างพอสมควรเนื่องจากเบราว์เซอร์พยายามหลีกเลี่ยงการเลื่อนในแนวนอน ในกรณีของฉันฉันต้องการเลื่อนแนวนอน

ความคิดใด ๆ

ลองดูที่white-spaceทรัพย์สินที่ใช้เช่นนี้:

th {
    white-space: nowrap;
}

สิ่งนี้จะบังคับเนื้อหาของ <th>จะแสดงในหนึ่งบรรทัด

จากหน้าเชื่อมโยงต่อไปนี้เป็นตัวเลือกต่าง ๆ สำหรับwhite-space:

ปกติ
ค่านี้จะนำตัวแทนผู้ใช้เพื่อยุบลำดับของพื้นที่สีขาวและแบ่งบรรทัดตามความจำเป็นในการกรอกข้อมูลลงในกล่องรายการ

ก่อน
นี้ตัวแทนผู้ใช้ป้องกันค่าจากลำดับการยุบพื้นที่สีขาว บรรทัดจะแตกที่อักขระขึ้นบรรทัดใหม่ที่สงวนไว้เท่านั้น

nowrap
ค่านี้จะยุบพื้นที่สีขาวสำหรับ 'ปกติ' แต่จะไม่แสดงตัวแบ่งบรรทัดภายในข้อความ

pre-wrap
ค่านี้ป้องกันตัวแทนผู้ใช้จากการยุบลำดับของ white space บรรทัดแตกที่อักขระขึ้นบรรทัดใหม่ที่สงวนไว้และตามความจำเป็นในการกรอกข้อมูลลงในกล่องรายการ

บรรทัดก่อน
ค่านี้จะนำตัวแทนผู้ใช้เพื่อยุบลำดับของพื้นที่สีขาว บรรทัดแตกที่อักขระขึ้นบรรทัดใหม่ที่สงวนไว้และตามความจำเป็นในการกรอกข้อมูลลงในกล่องรายการ

<th nowrap="nowrap">

หรือ

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

หรือ

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

มีอย่างน้อยสองวิธีในการทำ:

ใช้แอตทริบิวต์ nowrap ภายในแท็ก "td":

<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

ในกรณีที่คุณอยู่ที่นี่สงสัยว่าสิ่งนี้ทำงานอย่างไรกับ Material UI เมื่อสร้างใน React นี่คือวิธีที่คุณเพิ่มสิ่งนี้กับ<TableHead>ส่วนประกอบของคุณ:

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