Question

我刚刚意识到表格不会在浏览器中平均呈现。

让我们看看这个示例http://files.fina-indo.com/html-tests/tabletest.html并在Firefox和Google Chrome中打开它。它在Firefox中看起来不错，但在Google Chrome中却很奇怪。

有没有办法让它平等渲染？使用DIV网格是解决这个问题的唯一方法吗？

注意：我问这个是因为我的Joomla用户是一个门外汉，他对HTML和CSS一无所知（他只知道放置内容）。 Joomla内部的WYSIWYG编辑器没有简单的方法来创建DIV网格（Twitter Bootstrap网格）。如果表格看起来同样不是一个选项，是否有TinyMCE插件或其他WYSIWYG编辑器可以做到这一点？

以下是我使用的HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>HTML</title>
    <meta name="description" content="" />
    <meta name="author" content="Erwin" />

    <meta name="viewport" content="width=device-width; initial-scale=1.0" />

    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="stylesheet" href="../gamma/templates/shaper_helix_ii/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="css/normalize.css" type="text/css" />

    <style type="text/css">
      .container {
        width: 940px
      }
    </style>
  </head>

  <body>
    <div>
      <header>
        <h1>HTML</h1>
      </header>
      <nav>
        <p>
          <a href="/">Home</a>
        </p>
        <p>
          <a href="/contact">Contact</a>
        </p>
      </nav>

      <div>
        <table border="0">
          <tbody>
            <tr>
              <td></td>
              <td></td>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_LanSchool.png" alt="" /></td>
              <td></td>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_ROO.png" alt="" /></td>
              <td></td>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_Microsoft.png" alt="" /></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_Eduvision.png" alt="" /></td>
              <td></td>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_KNT_Interactive.png" alt="" /></td>
              <td></td>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_Educo.png" alt="" /></td>
              <td></td>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_MiracleEdu.png" alt="" /></td>
            </tr>
          </tbody>
        </table>
      </div>

      <footer>
        <p>
          &copy; Copyright  by Erwin
        </p>
      </footer>
    </div>
  </body>
</html>

Firefox截图

Chrome屏幕截图

Answer 1

不要使用表格进行布局，它们用于表格数据，而不是演示文稿。

为了满足那些说这不是答案的人，如果你有一部分HTML使用空行和15个空单元格来正确地对空间图像，那么需要重新考虑HTML源代码。唯一的解决方案是：

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

重新开始并重写。

Answer 2

您可以尝试使用normalize.css之类的内容来让各个浏览器的表格（和其他元素）看起来更相似。

Answer 3

你可以通过添加* {padding：0px;来测试问题是否与你的css有关。 margin：0px;}到最顶层的css文件它将删除所有东西上的所有填充和边距。

虽然它会弄乱你的css，但它应该使表在所有浏览器中渲染相同。

一旦你确定这确实与css相关，那么google for css browser reset hack并实现它。它将尝试重置所有非标准浏览器独立的CSS设置

如何在浏览器中平等地制作HTML表格？

3 个答案: