Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This is an artifact of your css conflicting with your table widths (or lack thereof).</p> <p>This code defines the cell widths in the first row, and then uses css to make the encosed divs fill the cells:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;head&gt; &lt;style&gt; td div { width:100%; border: solid 1px black; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table border=1 width="1000px" &gt; &lt;tr&gt;&lt;td width="18%"&gt;18%&lt;/td&gt;&lt;td width="30%"&gt;30%&lt;/td&gt;&lt;td width="26%"&gt;26%&lt;/td&gt;&lt;td width="26%"&gt;26%&lt;/td&gt;&lt;/tr&gt; &lt;tr valign="top"&gt;&lt;td colspan="1" &gt;&lt;div&gt;18%&lt;/div&gt;&lt;/td&gt;&lt;td colspan="3" &gt;&lt;div&gt;82%&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr valign="top"&gt;&lt;td colspan="4" &gt;&lt;div&gt;100%&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr valign="top"&gt;&lt;td colspan="2" &gt;&lt;div&gt;48%&lt;/div&gt;&lt;/td&gt;&lt;td colspan="2" &gt;&lt;div&gt;52%&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The main issue is that you are defining widths for divs inside of table cells, expecting them to force your table into shape. In reality, your first cells (the empty ones on the top) have no defined width, so when you span across those undefined widths, you get more undefined width, and then you shoehorn some sized divs into them. You should probably either set your divs to 100% width, and size your cells, or simply style your cells, eliminating the divs altogther.</p> <p>Best of all, just use css and divs, without a table, but I understand that that can be an exercise in frustration, especially if you are new to css.</p>
 

Querying!

 
Guidance

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