table-backgrounds-bs-rowgroup-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-bs-rowgroup-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 7px 3px;
 20 		padding: 3px 7px 8px 6px;
 21 		border-collapse: separate;
 22 		border-spacing: 2px 3px;
 23 	}
 24 
 25 	td {
 26 		border: transparent solid;
 27 		border-width: 2px 1px 4px 3px;
 28 		padding: 1px 2px 4px 3px;
 29 		empty-cells: show;
 30 	}
 31 
 32 	div { height: 10px; width: 50px; }
 33 
 34 	table.color tbody.t { background-color: aqua; }
 35 
 36 	table.imagetl tbody.t, table.imagebr tbody.t {
 37 		background-image: url(support/repeatable-diagonal-gradient-with-ticks.png);
 38 	}
 39 
 40 	table.imagetl tbody.t { background-position: top left; /* default */ }
 41 	table.imagebr tbody.t { background-position: bottom right; /* default */ }
 42 
 43 	</style>
 44 </head>
 45 <body>
 46 
 47 <table class="color">
 48 	<colgroup><col></colgroup>
 49 	<colgroup class="t">
 50         <col>
 51         <col class="t">
 52         <col>
 53 	</colgroup>
 54 	<colgroup><col></colgroup>
 55 	<tbody>
 56         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 57 	</tbody>
 58 	<tbody class="t">
 59         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 60         <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>
 61         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 62 	</tbody>
 63 	<tbody>
 64         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 65 	</tbody>
 66 </table>
 67 
 68 <table class="imagetl">
 69 	<colgroup><col></colgroup>
 70 	<colgroup class="t">
 71         <col>
 72         <col class="t">
 73         <col>
 74 	</colgroup>
 75 	<colgroup><col></colgroup>
 76 	<tbody>
 77         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 78 	</tbody>
 79 	<tbody class="t">
 80         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 81         <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>
 82         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 83 	</tbody>
 84 	<tbody>
 85         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 86 	</tbody>
 87 </table>
 88 
 89 <table class="imagebr">
 90 	<colgroup><col></colgroup>
 91 	<colgroup class="t">
 92         <col>
 93         <col class="t">
 94         <col>
 95 	</colgroup>
 96 	<colgroup><col></colgroup>
 97 	<tbody>
 98         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 99 	</tbody>
100 	<tbody class="t">
101         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
102         <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>
103         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
104 	</tbody>
105 	<tbody>
106         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
107 	</tbody>
108 </table>
109 
110 
111 
112 </body></html>