编辑:我没有自己构建这张表。绝对不应该以这种方式构建表格,这是我将来要实现的修复方法。但不幸的是,后端代码依赖于这个确切的表结构——每个内部表都有它自己的类名和 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 的解决方案?
如果你无法想象它,我的表格基本上是这样的(如果里面有更多的列,它会逐渐变得更糟)
我希望我解释得足够好,如果需要更多信息,我会提供
最佳答案
你不应该有 <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>
关于html - 多表合一 - 错位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25899799/