Question

我知道这已被问过几次，但没有一个答案针对它背后的理论问题而且没有一个对我有效（如果这是可以解决的，我不确定）。

我有两张桌子。是的，他们需要是表，不，我不能合并它们。其中一个具有另一个的多列值（请参阅示例代码）。正是如此，两列的常见分隔符从未在Chrome中对齐。我提到chrome，因为它适用于Firefox，但必须使用chrome。

将padding个细胞重新定义为0，分为thead和tbody ......不起作用。当然，如果在两个表中放入相同数量的列，它就可以工作。任何有建设性的评论都非常受欢迎，因为我有点绝望。谢谢！

＆＃13;

<table style="table-layout: fixed; width: 590px; height: 25px; border-collapse:collapse;
  border-spacing:0;">
  <tr>
    <td style="border-collapse: collapse;  border: 1px solid #ddd"></td>
    <td style="border: 1px solid #ddd"></td>
    <td style="border: 1px solid #ddd"></td>
    <td style="border: 1px solid #ddd"></td>
    <td style="border: 1px solid #ddd"></td>
    <td style="border: 1px solid #ddd"></td>
    <td style="border: 1px solid #ddd"></td>
    <td style="border: 1px solid #ddd"></td>
  </tr>
</table>
<table style="table-layout: fixed; width: 590px; height: 25px; border-collapse:collapse;
  border-spacing:0;">
  <tr>
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted solid solid; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid dotted; border-color: #ddd; border-width: 1px;">
    <td style="border-style: solid solid solid dotted; border-color: #ddd; border-width: 1px;">
  </tr>
</table>

＆＃13;

Answer 1

问题在于table的设计方式。

两个表都设置为590px，因此理想情况下它们都应占用相同的空间。

但是，您没有考虑cellspacing和cellpadding。

为了设计这两个表格以完美对齐，您需要设置每个width的{{1}}以及td帐户。

如果您正确划分第一张表格，则每个td最多为cellspacing，第二张为73.75px

然而，由于列数更多，第二个表的18.4375更多。

如果您计算正确且帐户为cellspacing，则应解决您的问题。

希望这能解决您的问题。

Answer 2

虽然我并不完全满意，但解决了这个问题。 1.修复两个表的tds宽度 2.使用表格的总宽度，直到它匹配得很好。

在html中对齐两个表的列

2 个答案: