IE8 แยกคอลัมน์ออกจาก tbody

ฉันมีปัญหาในการแสดงหลายตารางในหน้าเดียว

รหัสตารางค่อนข้างง่าย CSS กำหนดความกว้างของแต่ละ td ด้วย % และ table-layout คือ fixed

ดูเหมือนว่าปัญหาจะเกิดขึ้นเนื่องจากตารางแรกมีจำนวนคอลัมน์ X จำนวนคอลัมน์ แต่ตารางที่สองมีจำนวน X + 3 ซึ่งทำให้คอลัมน์สุดท้ายถูกแยกออกจากเนื้อหาของตาราง

เมื่อตรวจสอบ DOM ฉันจะเห็นว่าคอลัมน์สุดท้ายทางด้านขวานั้นมีอยู่ภายนอกเนื้อหาของตาราง (ในการออกแบบ) แต่มีอยู่ภายในเนื้อหาของตารางในโค้ด

ถ้าฉันลบ table-layout:fixed ออกจาก css ตารางจะทับซ้อนกัน แต่จะใช้สีพื้นหลัง CSS ที่ถูกต้อง ฯลฯ กับคอลัมน์สุดท้าย สิ่งนี้จะเกิดขึ้นเช่นกันหากฉันปล่อยเค้าโครงตารางไว้เหมือนเดิม แต่ลบแอตทริบิวต์ width:100% ออก ดูเหมือนว่าอาจเป็นปัญหาที่ต้องรักษาความกว้างของตารางคงที่ไว้ตลอดทั้งตารางตั้งแต่ตารางแรก

ฉันเชื่อว่านี่อาจเกี่ยวข้องอย่างยิ่งกับ คำตอบ SO นี้

มีความคิดอะไรบ้าง?

<div>
    <table>
        // th elements
        <tbody>
            <tr>
               <td>1</td>
            </td>
        </tbody>
    </table>
</div>
<div>
    <table>
        // th elements
        <tbody>
            <tr>
               <td>1</td>
               <td>2</td>
            </tr>
        </tbody>
    </table>
</div>