文章/答案/技术大牛

发布

社区首页 >问答首页 >在html中对齐两个表的列。

问在html中对齐两个表的列。
EN

Stack Overflow用户

提问于 2016-03-07 20:14:31

回答 2查看 112关注 0票数 0

我知道这个问题已经被问了几次，但没有一个答案针对它背后的理论问题，也没有一个对我有效(如果这是可解决的，我不确定)。

我有两张桌子。是的，它们需要是表，不，我不能合并它们。其中一个有另一个的多列值(参见示例代码)。因此，在Chrome中，两列的公共分隔符永远不会对齐。我提到chrome是因为它可以在firefox上运行，但必须在chrome上运行。

将单元格的padding重新定义为0，拆分为thead和tbody...不起作用。当然，如果在两个表中放置相同数量的列，它就会起作用。我非常感谢任何有建设性的评论，因为我有点绝望。谢谢!

<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>

html

google-chrome

回答 2

Stack Overflow用户

发布于 2016-03-07 20:31:52

问题出在table的设计方式上。

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

然而，您没有考虑到cellspacing和cellpadding。

为了将这两个表设计成完全对齐，您需要设置每个td的width以及cellspacing。

如果您正确划分第一个表，则每个td将达到73.75px，而第二个td将达到18.4375

但是，由于第二个表的列数较多，因此具有更多的cellspacing。

如果你计算正确并考虑到cellspacing，它应该能解决你的问题。

希望这能解决你的问题。

票数 0

Stack Overflow用户

发布于 2016-03-07 21:56:32

虽然我并不完全满意，但还是解决了这个问题。1.固定两个表的tds宽度2.调整表的总宽度，直到它很好地匹配。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35843496

复制

相似问题

问在html中对齐两个表的列。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在html中对齐两个表的列。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在html中对齐两个表的列。
EN