rowspan 和 colspan 在 Chrome 中不起作用

Question

我有一个代码片段，如下所示。完整的代码可以在这里看到：http://codepen.io/anon/pen/VYbxbQ

<table style="display: inline-table; width: 1220px;">
  <tbody>
    <tr style="">
      <td rowspan="3">
        <a href="#">
          <div style="height: 440px; width: 280px; background: #000;"></div>
        </a>
      </td>

...

在Chrome中加载时，布局看起来不是很紧凑。当在 Firefox 中加载时，它看起来很紧实，而且正是它应该的样子。

有什么想法吗？

Answer 1

您将 colspan/rowspans 与已定义的宽度和高度混合在一起，这将使此布局很难预测，就像您现在遇到的那样。

如果您这样做是出于布局目的，我建议您不要使用表格。查看 this Stack Overflow question 了解更多信息。

尝试使用网格布局。有很多可用的，例如 Bootstrap 和 Foundation.

rowspan 和 colspan 在 Chrome 中不起作用

rowspan and colspan not working in Chrome

html

google-chrome

html-table