html - 多表合一 - 错位

Question

编辑:我没有自己构建这张表。绝对不应该以这种方式构建表格，这是我将来要实现的修复方法。但不幸的是，后端代码依赖于这个确切的表结构——每个内部表都有它自己的类名和 id 以及触发器函数等。

我在处理由多个表组成的表时遇到了这个问题 - 一个表是表本身，另一个表构成标题，或 <thead> ，另一个表组成了 <tbody> - 表格单元格 ( <td> ) 中也有 div，它看起来像这样:

<div id="myTableContainer">
    <table id="myTable">
        <thead>
            <table id="myTableHeader">
                <tr>
                    <td>
                        <div>Header Data 1</div>
                    </td>
                    <td>
                        <div>Header Data 2</div>
                    </td>
                </tr>
            </table>
        </thead>
        <tbody>
            <table id="myTableData">
                <tr>
                    <td>
                        <div>Table Data 1</div>
                    </td>
                    <td>
                        <div>Table Data 2</div>
                    </td>
                </tr>
            </table>
        </tbody>
    </table>
</div>

问题是有一些 javascript 在后台工作以根据其中的文本量调整这些表格单元格的大小，但我无法使用 CSS 将标题单元格与其下方的行正确对齐。我已经尝试过 table-layout属性(property)并给予每一个td最大/最小宽度，但我坚持让所有数据和列对齐，因为如果创建了很多列，表格会逐渐错位。更何况，这两个内表都是动态生成的，不是整表重构那么简单。这张表被证明很难使用，因为它是为 IE5 或 6 开发的(一直在 Quirks 模式下工作)

有没有人对如何正确对齐这张 table 有任何想法或可靠的解决方案？最好是基于 CSS 的解决方案？

如果你无法想象它，我的表格基本上是这样的(如果里面有更多的列，它会逐渐变得更糟)

我希望我解释得足够好，如果需要更多信息，我会提供

Answer 1

你不应该有 <table>里面的标签 <thead>和 <tbody> .您的代码应如下所示:

<div id="myTableContainer">
    <table id="myTable" border="1">
        <thead>
                <tr>
                    <td>
                        <div>Header Data 1</div>
                    </td>
                    <td>
                        <div>Header Data 2</div>
                    </td>
                </tr>
        </thead>
        <tbody>
                <tr>
                    <td>
                        <div>Table Data 1</div>
                    </td>
                    <td>
                        <div>Table Data 2</div>
                    </td>
                </tr>
        </tbody>
    </table>
</div>