Merge pull request #11 from gavinhenderson/patch-1

Added table styles

README.md

@@ -120,7 +120,6 @@ You can also only import parts you want, but this is not recommended. See the `s
 
 ## Todos
 
-- [Tables](https://github.com/kognise/water.css/issues/5)
 - Blockquotes
 - Add a screenshot
 - Jekyll theme

index.html

@@ -81,6 +81,34 @@ <h3>Other</h3>
     <img src='http://placekitten.com/408/287' alt='Example kitten'>
     <hr>
 
+    <p>And here's a nicely marked up table!</p>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Quantity</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Godzilla</td>
+          <td>2</td>
+          <td>$299.99</td>
+        </tr>
+        <tr>
+          <td>Mozilla</td>
+          <td>10</td>
+          <td>$100,000.00</td>
+        </tr>
+        <tr>
+          <td>Quesadilla</td>
+          <td>1</td>
+          <td>$2.22</td>
+        </tr>
+      </tbody>
+    </table>
+
     <h3>Typography</h3>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

src/parts/_misc.scss

@@ -5,4 +5,18 @@ img {
 hr {
   border: none;
   border-top: 1px solid $border;
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+td, th {
+  padding: 6px;
+}
+
+table, th, td {
+  border: 1px solid $border;
 }