wiki.techinc.nl/docs/uidesign/table-layout.html

<!DOCTYPE html>
<html>
<head>
	<style>
		/** This is just for coloring: */
		table { border: 1px solid #CC0; }
		td { border: 1px solid  #CCC; }

		table {
			width: 100%;
			table-layout: fixed;
		}

		#first {
			width: 300px;
		}
	</style>
</head>
<body>

<p>
This play with table-layout:fixed; and applying the width to colgroup or col element. Firefox only recongize the width if it is applied on col element!</p>
<p>
On a perfect browser, both tables should look the same</p>

<dl>
	<dt>colgroup</dt>
	<dd>300 px width is applied to the first colgroup element</dd>
</dl>
<div style="width: 400px;">
<table>
	<colgroup id="first" /></colgroup>
	<colgroup id="second"/></colgroup>
	<colgroup id="third" /></colgroup>
	<tr>
		<td>Very long?</td>
		<td>#</td>
		<td>$</td>
	</tr>
</table>
</div>

<dl>
	<dt>col</dt>
	<dd>Each colgroup has an additional col element. The first col element is applied the 300 px width</dd>
</dl>

<div style="width: 400px;">
<table>
	<colgroup><col id="first" /></colgroup>
	<colgroup><col id="second"/></colgroup>
	<colgroup><col id="third" /></colgroup>
	<tr>
		<td>Very long?</td>
		<td>#</td>
		<td>$</td>
	</tr>
</table>
</div>
firefox does not honor colgroup width with fixed layout 2012-01-16 21:13:48 +00:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
Drop redundant attributes in hardcoded html Follows-up 97caae596d5493 which makes HTML5 the default and removes support for XHTML 1.0 and HTML < 5. * <script type> * <style type> * <html xmlns> * Quick-closing slash in non-XML HTML5 documents Change-Id: I71855fa8d4095a5a448ebdc3dc36506ddab6f70c 2013-05-20 21:47:56 +00:00			`<style>`
firefox does not honor colgroup width with fixed layout 2012-01-16 21:13:48 +00:00			`/** This is just for coloring: */`
			`table { border: 1px solid #CC0; }`
			`td { border: 1px solid #CCC; }`

			`table {`
			`width: 100%;`
			`table-layout: fixed;`
			`}`

			`#first {`
			`width: 300px;`
			`}`
			`</style>`
			`</head>`
			`<body>`

			`<p>`
			`This play with table-layout:fixed; and applying the width to colgroup or col element. Firefox only recongize the width if it is applied on col element!</p>`
			`<p>`
			`On a perfect browser, both tables should look the same</p>`

			`<dl>`
			`<dt>colgroup</dt>`
			`<dd>300 px width is applied to the first colgroup element</dd>`
			`</dl>`
			`<div style="width: 400px;">`
			`<table>`
			`<colgroup id="first" /></colgroup>`
			`<colgroup id="second"/></colgroup>`
			`<colgroup id="third" /></colgroup>`
			`<tr>`
			`<td>Very long?</td>`
			`<td>#</td>`
			`<td>$</td>`
			`</tr>`
			`</table>`
			`</div>`

			`<dl>`
			`<dt>col</dt>`
			`<dd>Each colgroup has an additional col element. The first col element is applied the 300 px width</dd>`
			`</dl>`

			`<div style="width: 400px;">`
			`<table>`
			`<colgroup><col id="first" /></colgroup>`
			`<colgroup><col id="second"/></colgroup>`
			`<colgroup><col id="third" /></colgroup>`
			`<tr>`
			`<td>Very long?</td>`
			`<td>#</td>`
			`<td>$</td>`
			`</tr>`
			`</table>`
			`</div>`