table-backgrounds-bc-colgroup-001

table backgrounds

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Source

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html lang="en-US"><head>
  3     <link rel="reference" href="table-backgrounds-bc-colgroup-001-ref.xht">
  4     <title>CSS Test: table backgrounds</title>
  5     <link rel="author" title="L. David Baron" href="http://dbaron.org/">
  6     <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
  7     <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers">
  8     <meta name="flags" content="">
  9 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 10 	<meta http-equiv="Content-Style-Type" content="text/css">
 11 	<style type="text/css">
 12 
 13 	html, body { margin: 0; padding: 0; border: 0; font-size: 16px; }
 14 	body { padding: 15px; }
 15 
 16 	table { 
 17 		margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */
 18 		border: transparent solid;
 19 		border-width: 4px 2px 8px 6px; /* collapsed */
 20 		padding: 3px 7px 8px 6px; /* ignored */
 21 		border-collapse: collapse;
 22 	}
 23 
 24 	td {
 25 		border: transparent solid;
 26 		border-width: 2px 0 4px 2px; /* collapsed */
 27 		padding: 1px 2px 4px 3px;
 28 		empty-cells: show;
 29 	}
 30 
 31 	div { height: 10px; width: 50px; }
 32 
 33 	table.color colgroup.t { background-color: aqua; }
 34 
 35 	table.imagetl colgroup.t, table.imagebr colgroup.t {
 36 		background-image: url(support/repeatable-diagonal-gradient-with-ticks.png);
 37 	}
 38 
 39 	table.imagetl colgroup.t { background-position: top left; /* default */ }
 40 	table.imagebr colgroup.t { background-position: bottom right; /* default */ }
 41 
 42 	</style>
 43 </head>
 44 <body>
 45 
 46 <table class="color">
 47 	<colgroup><col></colgroup>
 48 	<colgroup class="t">
 49         <col>
 50         <col class="t">
 51         <col>
 52 	</colgroup>
 53 	<colgroup><col></colgroup>
 54 	<tbody>
 55         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 56 	</tbody>
 57 	<tbody class="t">
 58         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 59         <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr>
 60         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 61 	</tbody>
 62 	<tbody>
 63         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 64 	</tbody>
 65 </table>
 66 
 67 <table class="imagetl">
 68 	<colgroup><col></colgroup>
 69 	<colgroup class="t">
 70         <col>
 71         <col class="t">
 72         <col>
 73 	</colgroup>
 74 	<colgroup><col></colgroup>
 75 	<tbody>
 76         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 77 	</tbody>
 78 	<tbody class="t">
 79         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 80         <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr>
 81         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 82 	</tbody>
 83 	<tbody>
 84         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 85 	</tbody>
 86 </table>
 87 
 88 <table class="imagebr">
 89 	<colgroup><col></colgroup>
 90 	<colgroup class="t">
 91         <col>
 92         <col class="t">
 93         <col>
 94 	</colgroup>
 95 	<colgroup><col></colgroup>
 96 	<tbody>
 97         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 98 	</tbody>
 99 	<tbody class="t">
100         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
101         <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr>
102         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
103 	</tbody>
104 	<tbody>
105         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
106 	</tbody>
107 </table>
108 
109 
110 
111 </body></html>