วิธีป้องกันการแบ่งบรรทัดในคอลัมน์ของเซลล์ตาราง (ไม่ใช่เซลล์เดียว)

ฉันจะป้องกันการแบ่งบรรทัดอัตโนมัติในคอลัมน์ของตาราง (ไม่ใช่เซลล์เดียว) ได้อย่างไร

คุณสามารถใช้ 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>

มีสองสามวิธีในการทำสิ่งนี้; ไม่มีวิธีใดที่ง่ายและชัดเจน

การใช้ white-space: nowrap กับ a <col>จะไม่ทำงาน คุณสมบัติ CSS สี่รายการทำงานเท่านั้น<col>องค์ประกอบ - สีพื้นหลัง, ความกว้าง, เส้นขอบและการมองเห็น IE7 และรุ่นก่อนหน้านี้ใช้เพื่อสนับสนุนคุณสมบัติทั้งหมด แต่นั่นเป็นเพราะพวกเขาใช้รูปแบบตารางที่แปลก IE8 ตอนนี้ตรงกับคนอื่น ๆ

ดังนั้นคุณจะแก้ปัญหานี้อย่างไร

ถ้าคุณไม่สนใจ IE (รวมถึง IE8) คุณสามารถใช้:nth-child()pseudoclass เพื่อเลือก<td>s จากแต่ละแถว td:nth-child(2) { white-space:nowrap; }คุณต้องการใช้ (ใช้งานได้สำหรับตัวอย่างนี้ แต่จะแตกถ้าคุณมี rowspans หรือ colspans ที่เกี่ยวข้อง)

หากคุณต้องรองรับ 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>

นี่คือตัวอย่างการใช้งานของคุณสมบัติ white space ที่มีค่า nowrap, bluetable คือคลาสของตารางด้านล่างของตารางเป็นสไตล์ CSS

ใส่ช่องว่างแบบไม่ทำลายในข้อความแทนที่จะเป็นช่องว่างปกติ บน Ubuntu ฉันใช้ (Compose Key) -space-space

หากต้องการนำไปใช้กับทั้งตารางคุณสามารถวางไว้ในtableแท็ก:

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