Skip to content

Instantly share code, notes, and snippets.

@dgmid

dgmid/dabblet.css

Created March 11, 2012 20:11
Download ZIP

Revisions

  1. dgmid revised this gist Mar 12, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@

    body {
    font-family: helvetica;
    padding-top: 10px;
    padding-top: 45px;
    background-color: #fff;
    }

  2. dgmid revised this gist Mar 12, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split","seethrough":"","prefixfree":"1","page":"result"}
  3. dgmid revised this gist Mar 12, 2012. 2 changed files with 11 additions and 15 deletions.
    24 changes: 10 additions & 14 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,34 +1,30 @@
    <h1>✪ css3 table with rounded corners</h1>

    <table>
    <thead>
    <tr>
    <th>head 1:1</th>
    <thead>
    <tr>
    <th>head 1:1</th>
    <th>head 1:2</th>
    <th>head 1:3</th>
    </tr>
    </thead>

    <tr>
    <td>foot 2:1</td>
    <td>foot 2:2</td>
    <td>foot 2:3</td>
    </tr>

    </thead>
    <tr>
    <td>cell 3:1</td>
    <td>cell 3:2</td>
    <td>cell 3:3</td>
    </tr>
    <tr> <td>cell 3:1</td>
    <tr>
    <td>cell 3:1</td>
    <td>cell 3:2</td>
    <td>cell 3:3</td>
    </tr>
    <tr> <td>cell 3:1</td>
    <tr>
    <td>cell 3:1</td>
    <td>cell 3:2</td>
    <td>cell 3:3</td>
    </tr>
    <tr> <td>cell 3:1</td>
    <tr>
    <td>cell 3:1</td>
    <td>cell 3:2</td>
    <td>cell 3:3</td>
    </tr>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","seethrough":"","prefixfree":"1","page":"result"}
    {"view":"split","seethrough":"","prefixfree":"1","page":"html"}
  4. dgmid revised this gist Mar 12, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,7 @@
    body {
    font-family: helvetica;
    padding-top: 10px;
    background-color: #fff;
    }

    h1 {
  5. dgmid revised this gist Mar 12, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split","seethrough":"","prefixfree":"1","page":"result"}
  6. dgmid created this gist Mar 11, 2012.
    107 changes: 107 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,107 @@
    /**
    * table with rounded corners
    */

    body {
    font-family: helvetica;
    padding-top: 10px;
    }

    h1 {
    color: #dfdfdf;
    text-align: center;
    padding-bottom: 10px;
    font-size: 20px;

    }

    /* table has shadow */

    table {
    border-radius: 10px;
    margin: 20px auto;
    border-collapse: collapse;
    border-spacing:0;
    box-shadow: 0 2px 10px #ccc;
    }

    /*every cell has a border on bottom & right*/

    td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px 20px;
    color: #444;
    }

    /*cancel the right border on the last column*/

    td:last-child {
    border-right: none;
    }

    /*th has border only on bottom*/

    th {
    border-bottom: 1px solid #ccc;
    padding: 10px 20px;

    }

    /*rounded corner top left - first th*/

    th:first-child {
    border-radius: 10px 0 0 0;
    }

    /*rounded corner top right - last th*/

    th:last-child {
    border-radius: 0 10px 0 0;

    }

    /*rounder corner bottom left - first cell of last row*/

    tr:last-child td:first-child {
    border-radius: 0 0 0 10px;
    }

    /*rounded corner bottom right - last cell of last row*/

    tr:last-child td:last-child {
    border-radius: 0 0 10px 0;

    }

    /*last row in has no border on the bottom*/

    table tr:last-child td {
    border-bottom: none;

    }

    /*table header style*/
    /*note: the gradient must be on the <th> & <td>,
    ff you put it on the <tr> it will stick out of the
    rounded corners in Firefox*/

    thead tr th {
    background-image: linear-gradient(top, #f7f7f7 0%, #d4d4d4 100%);;

    }

    /*table row style*/

    tr td {
    background-image: linear-gradient(top, #ffffff 0%, #e4f0ff 100%);
    text-shadow: 0 1px 0 #fff;
    }

    /*table even rows style*/

    tr:nth-child(even) td {
    background-image: linear-gradient(top, #ffffff 0%, #eee 100%);

    }

    35 changes: 35 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    <h1>✪ css3 table with rounded corners</h1>

    <table>
    <thead>
    <tr>
    <th>head 1:1</th>
    <th>head 1:2</th>
    <th>head 1:3</th>
    </tr>
    </thead>

    <tr>
    <td>foot 2:1</td>
    <td>foot 2:2</td>
    <td>foot 2:3</td>
    </tr>

    <tr>
    <td>cell 3:1</td>
    <td>cell 3:2</td>
    <td>cell 3:3</td>
    </tr>
    <tr> <td>cell 3:1</td>
    <td>cell 3:2</td>
    <td>cell 3:3</td>
    </tr>
    <tr> <td>cell 3:1</td>
    <td>cell 3:2</td>
    <td>cell 3:3</td>
    </tr>
    <tr> <td>cell 3:1</td>
    <td>cell 3:2</td>
    <td>cell 3:3</td>
    </tr>
    </table>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","seethrough":"","prefixfree":"1","page":"css"}