บังคับให้ความกว้างของคอลัมน์ตารางคงที่เสมอโดยไม่คำนึงถึงเนื้อหา

ฉันมีตาราง html table-layout: fixedและ td ที่มีความกว้างที่กำหนด คอลัมน์ยังคงขยายเพื่อเก็บเนื้อหาของข้อความที่ไม่มีช่องว่าง มีวิธีแก้ไขนอกเหนือจากการตัดเนื้อหาของแต่ละ td ใน div หรือไม่?

ตัวอย่าง: http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

td
{
    border: 1px solid green;
    overflow: hidden;
}

ในตัวอย่างคุณจะเห็นว่าคอลัมน์ที่มี AAAAAAAAAAAA ... ขยายออกแม้จะตั้งค่าเป็นความกว้าง 50px อย่างชัดเจน

ระบุความกว้างของตาราง:

table
{
    table-layout: fixed;
    width: 100px;
}

ดูjsFiddle

ลองดู CSS ต่อไปนี้:

word-wrap:break-word;

เว็บเบราว์เซอร์ไม่ควรแยก "คำ" โดยค่าเริ่มต้นดังนั้นสิ่งที่คุณพบจึงเป็นพฤติกรรมปกติของเบราว์เซอร์ อย่างไรก็ตามคุณสามารถแทนที่สิ่งนี้ได้ด้วยคำสั่ง CSS แบบตัดคำ

คุณจะต้องกำหนดความกว้างบนตารางโดยรวมจากนั้นจึงกำหนดความกว้างของคอลัมน์ "ความกว้าง: 100%;" ก็ควรจะโอเคขึ้นอยู่กับความต้องการของคุณ

การใช้ word-wrap อาจไม่ใช่สิ่งที่คุณต้องการ แต่มีประโยชน์ในการแสดงข้อมูลทั้งหมดโดยไม่ทำให้เค้าโครงเสียรูปแบบ

ทำให้โต๊ะแข็งก่อน css กำหนดความกว้างของตารางของคุณจากนั้นใช้แถว 'การควบคุม' โดยแต่ละ td มีความกว้างที่ชัดเจนซึ่งทั้งหมดนี้รวมกับความกว้างในแท็กตาราง

ต้องทำอีเมล html หลายร้อยฉบับจึงจะทำงานได้ทุกที่โดยใช้ HTML ที่ถูกต้องก่อนจากนั้นการจัดรูปแบบ w / css จะช่วยแก้ปัญหาต่างๆใน IE, webkit และ mozillas ทั้งหมด

ดังนั้น:

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

จะคงตารางไว้ที่ความกว้าง 300px ดูภาพที่มีขนาดใหญ่กว่าความกว้างโดยสุดขั้ว

คุณสามารถเพิ่มdivไปยังtdรูปแบบแล้วที่ ควรทำงานตามที่คุณคาดไว้

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

จากนั้น css

td div { width: 50px; overflow: hidden; }

คุณยังสามารถทำงานกับ "overflow: hidden" หรือ "overflow-x: hidden" (สำหรับความกว้างเท่านั้น) สิ่งนี้ต้องการความกว้างที่กำหนดไว้ (และ / หรือความสูง?) และอาจเป็น "display: block" ด้วย

"Overflow: Hidden" จะซ่อนเนื้อหาทั้งหมดซึ่งไม่พอดีกับช่องที่กำหนดไว้

ตัวอย่าง:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

CSS:

td div { width: 100px; overflow-y: hidden; }

แก้ไข: อัปยศฉันฉันเคยเห็นคุณใช้ "ล้น" แล้ว ฉันเดาว่ามันใช้ไม่ได้เพราะคุณไม่ได้ตั้งค่า "display: block" ให้กับองค์ประกอบของคุณ ...

ฉันจะลองตั้งค่าเป็น max-width: 50px;

คุณยังสามารถใช้เปอร์เซ็นต์และ / หรือระบุในส่วนหัวของคอลัมน์:

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

โบนัสที่มีเปอร์เซ็นต์คือการดูแลโค้ดที่ต่ำกว่า: คุณสามารถเปลี่ยนความกว้างของตารางได้โดยไม่ต้องระบุความกว้างของคอลัมน์

ข้อแม้: เป็นความเข้าใจของฉันว่าความกว้างของตารางที่ระบุเป็นพิกเซลนั้นไม่รองรับใน HTML 5 คุณต้องใช้ CSS แทน

สิ่งนี้ใช้ได้กับฉัน

td::after { 
content: ''; 
display: block; 
width: 30px;
}