Databases
StackOverflow2013
Postsdbo
POHow to make HTML table renders equally across browsers?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make HTML table renders equally across browsers?
    text
    copied!<p>I just realized that tables are not rendered equally across browsers.</p> <p>Let's take a look at this example <a href="http://files.fina-indo.com/html-tests/tabletest.html" rel="nofollow">http://files.fina-indo.com/html-tests/tabletest.html</a> and open it in Firefox and Google Chrome. It will look fine in Firefox but odd in Google Chrome.</p> <p>is there a way to make it renders equally? Is using DIV grids is the only solution for this issue?</p> <p>Note: I am asking this because my Joomla user is a layman, and he does not know anything about HTML and CSS (he only knows about putting the contents). And the WYSIWYG editor inside Joomla does not have an easy way to create DIV grids (Twitter Bootstrap grids). If making the tables looks equally are not an option, is there a TinyMCE plugins or other WYSIWYG editor that can do this?</p> <p>Here is the HTML I am using:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;!-- Always force latest IE rendering engine (even in intranet) &amp; Chrome Frame Remove this if you use the .htaccess --&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt; &lt;title&gt;HTML&lt;/title&gt; &lt;meta name="description" content="" /&gt; &lt;meta name="author" content="Erwin" /&gt; &lt;meta name="viewport" content="width=device-width; initial-scale=1.0" /&gt; &lt;!-- Replace favicon.ico &amp; apple-touch-icon.png in the root of your domain and delete these references --&gt; &lt;link rel="shortcut icon" href="/favicon.ico" /&gt; &lt;link rel="apple-touch-icon" href="/apple-touch-icon.png" /&gt; &lt;link rel="stylesheet" href="../gamma/templates/shaper_helix_ii/css/bootstrap.min.css" type="text/css" /&gt; &lt;link rel="stylesheet" href="css/normalize.css" type="text/css" /&gt; &lt;style type="text/css"&gt; .container { width: 940px } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;header&gt; &lt;h1&gt;HTML&lt;/h1&gt; &lt;/header&gt; &lt;nav&gt; &lt;p&gt; &lt;a href="/"&gt;Home&lt;/a&gt; &lt;/p&gt; &lt;p&gt; &lt;a href="/contact"&gt;Contact&lt;/a&gt; &lt;/p&gt; &lt;/nav&gt; &lt;div&gt; &lt;table border="0"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td colspan="3"&gt;&lt;img src="../gamma/images/solutions/GP_Solution_LanSchool.png" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td colspan="3"&gt;&lt;img src="../gamma/images/solutions/GP_Solution_ROO.png" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td colspan="3"&gt;&lt;img src="../gamma/images/solutions/GP_Solution_Microsoft.png" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="3"&gt;&lt;img src="../gamma/images/solutions/GP_Solution_Eduvision.png" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td colspan="3"&gt;&lt;img src="../gamma/images/solutions/GP_Solution_KNT_Interactive.png" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td colspan="3"&gt;&lt;img src="../gamma/images/solutions/GP_Solution_Educo.png" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td colspan="3"&gt;&lt;img src="../gamma/images/solutions/GP_Solution_MiracleEdu.png" alt="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;footer&gt; &lt;p&gt; &amp;copy; Copyright by Erwin &lt;/p&gt; &lt;/footer&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Firefox screenshot <img src="https://dl.dropboxusercontent.com/u/50400766/tabletest-firefox.jpg"/></p> <p>Chrome screenshot <img src="https://dl.dropboxusercontent.com/u/50400766/tabletest-chrome.jpg"/></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload