Added demo page illustrating the border-collapse: collapse issue

seburdin · Jul 16, 2012 · 0829e49 · 0829e49
1 parent 6b50bce
commit 0829e49
Showing 1 changed file with 73 additions and 0 deletions.
diff --git a/demo/border-collapse.htm b/demo/border-collapse.htm
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<!--[if lt IE 8]><html lang="en" class="legacy"><![endif]-->
+<!--[if gte IE 8]><!--><html lang="en"><!--<![endif]-->
+  <head>
+    <meta charset="utf-8">
+    <title>border-collapse Demo</title>
+    <style type="text/css">
+      table { border-collapse: collapse; width: 901px; }
+      th,
+      td { font-size: 22px; border: 1px solid #000; background-color: #fff; padding:5px; }
+    </style>
+  </head>
+  <body style="padding:50px">
+    <h1>border-collapse Demo</h1>
+    <p>Demo page illustrating the "border-collapse: collapse" issue (#2). Note how the borders on the header and body are misaligned when scrolling.</p>
+    <table>
+      <thead>
+        <tr>
+          <th>Label</th>
+          <th>Layout width</th>
+          <th>Column width</th>
+          <th>Gutter width</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Smartphones</td>
+          <td>480px and below</td>
+          <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
+        </tr>
+        <tr>
+          <td>Smartphones to tablets</td>
+          <td>767px and below</td>
+          <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
+        </tr>
+        <tr>
+          <td>Portrait tablets</td>
+          <td>768px and above</td>
+          <td>42px</td>
+          <td>20px</td>
+        </tr>
+        <tr>
+          <td>Default</td>
+          <td>980px and up</td>
+          <td>60px</td>
+          <td>20px</td>
+        </tr>
+        <tr>
+          <td>Large display</td>
+          <td>1200px and up</td>
+          <td>70px</td>
+          <td>30px</td>
+        </tr>
+      </tbody>
+    </table>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
+  <script src="../js/jquery.stickytableheaders.js" type="text/javascript"></script>
+  <script type="text/javascript">
+
+    $(document).ready(function () {
+      // adding filler rows
+      for(var i = 0; i < 3; i++){
+        $('tbody tr').clone().appendTo('table');
+      }
+
+      $("html:not(.legacy) table").stickyTableHeaders();
+    });
+
+  </script>
+
+  </body>
+</html>