Solving table rounded corner CSS

Question

I have this CSS rule for rounded corner:

th, td { padding: 8px;
         background: #E8ECE0;
         text-align: center;
         border: 1px solid #444;
         border-bottom-width: 0px;
}
thead { background-color: #446bb3  ; color :#fff; padding:4px; line-height:30px }
tbody tr:nth-child(even) {background: #F6F6EC;}
tbody tr:nth-child(odd) {background: #FFF}

tr:first-child td, tr:first-child th {
    border-top-left-radius: 12px; border-top-right-radius: 12px;
}
tr:last-child td {
    border-bottom: 1px solid #444;
    border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
}
table { border-spacing: 0; border: 0; margin:0px; width:100%; padding:5px}
td.pd {border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
td.pu {border-top-left-radius: 12px; border-top-right-radius: 12px;}

My html table is:

<table >
    <tbody>
      <tr >
        <td >Hello</td><td >Hello</td>
      </tr>
      <tr >
         <td >Hello</td><td >Hello</td>
      </tr>
      <tr >
         <td >Hello</td><td >Hello</td>
      </tr>
      <tr >
      <td >Hello</td><td >Hello</td>
      </tr>
    </tbody>
  </table>

which gives me this

How do I fix this problem, as the td elements within the table and in the middle of the table have rounded corners too? I only need the first row and last row to have rounded corners.

Answer 1

Assuming your table's html resembles the following:

<table>
    <thead>
        <tr>
            <th>First column</th>
            <th>Second column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row one, cell one</td>
            <td>Row one, cell two</td>
        </tr>
        <tr>
            <td>Row two, cell one</td>
            <td>Row two, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
    </tbody>
</table>

The the following CSS should work:

table {
    border-spacing: 0;
}
th, td {
    border: 1px solid #000;
    padding: 0.5em 1em;
}
/* the first 'th' within the first 'tr' of the 'thead': */
thead tr:first-child th:first-child {
    border-radius: 0.6em 0 0 0;
}
/* the last 'th' within the first 'tr' of the 'thead': */
thead tr:first-child th:last-child {
    border-radius: 0 0.6em 0 0;
}
/* the first 'td' within the last 'tr' of the 'tbody': */
tbody tr:last-child td:first-child {
    border-radius: 0 0 0 0.6em;
}
/* the last 'td' within the last 'tr' of the 'tbody': */
tbody tr:last-child td:last-child {
    border-radius: 0 0 0.6em 0;
}

JS Fiddle demo.

Edited in response to question from OP:

the border within the table is a little think, how do i make it 1px

The borders between cells are a little thick, because the left border of one cell is against the right border of the previous cells (and the same for top/bottom borders).

One way to remove that effect is to specify border-collapse: collapse; on the table element. Unfortunately the effect of this is to also remove/unset/override the border-radius declarations: demo.

The more complicated way is to manually remove top-borders for rows with a previous row, and the left-border of a cell that follows a cell, adding the following to the previous CSS:

thead + tbody tr td,
tr + tr td {
    border-top: 0;
}

tr th + th,
tr td + td {
    border-left: 0;
}

JS Fiddle demo.

Edited to reduce make the CSS more durable (for single-cell rows, for the addition of a tfoot or the removal of the thead):

table {
    border-spacing: 0;
}
th, td {
    border: 1px solid #000;
    padding: 0.5em 1em;
}
thead tr:first-child th:first-child,
tbody:first-child tr:first-child td:first-child {
    border-top-left-radius: 0.6em;
}
thead tr:first-child th:last-child,
tbody:first-child tr:first-child td:last-child {
    border-top-right-radius: 0.6em;
}

thead + tbody tr:last-child td:first-child,
tfoot tr:last-child td:first-child {
    border-bottom-left-radius: 0.6em;
}
thead + tbody tr:last-child td:last-child,
tfoot tr:last-child td:last-child {
    border-bottom-right-radius: 0.6em;
}

thead + tbody tr td,
tfoot + tbody tr td,
tfoot tr td,
tbody + tbody tr td,
tr + tr td {
    border-top: 0;
}

tr th + th,
tr td + td {
    border-left: 0;
}

JS Fiddle demo.

There is a problem with multiple tbody elements, in the absence of a tfoot element, currently in which the first tbody will retain the border-radius on their lower borders.

Answer 2

You can just put table into div. Styles for div (example):

div {
  border-radius: 4px;
  -moz-border-radius: 4px
  -webkit-border-radius: 4px;
  overflow: hidden; /*notice*/
}

So the table corners will be hidden.

Answer 3

This answer doesn't answer your question directly, but a variant. If you dont want the middle columns to have rounded corners, this is a possible solution:

Illustration:

Properties for the table row (tr): update the table data (td) for the left most column:

tbody tr td:first-child
{
    border-radius: 0.6em 0 0 0.6em;
}

Properties for the table row (tr): update the table data (td) for the second column:

tbody td:nth-child(2)
{
    border-radius: 0 0.6em 0.6em 0;
}

Here is an example: JS Fiddle demo

If you have more than one column (td or th) you simply add something like this:

tbody td:nth-child(2) /* This is now the middle element out of three */
{
    border-radius: 0 0 0 0;
}
tbody td:nth-child(3) /* This is now the right most column */
{
    boder-radius: 0 0.6em 0.6em 0;
}

Answer 4

You can reset the border radius of the td element. That should solve it.

Answer 5

You can give id to the td elements and using the id's of td elements set the border radius to 0px.

Answer 6

You should try a clear:both; and it will be reset. Also you can try !important because maybe you forget other "inline css rules" in other html codes.

Answer 7

Though this is an old answer, I'd like to enhance it by adding my findings. In addition to David Thomas's super-smart answer, I found an edge case where it doesn't exactly fit: A single-cell row! for example:

<table>
   <tr><th colspan="3">My header</th></tr>
   <tr><td>row1-cell1</td><td>row1-cell2</td><td>row1-cell3</td></tr>
   <tr><td>row2-cell1</td><td>row2-cell2</td><td>row2-cell3</td></tr>
   <tr><th colspan="3">My footer</th></tr>
</table>

The rule for the top-right corner would overwrite the rule for the top-left corner (because it comes after it), and the rule for the bottom-right corner would overwrite the rule for the bottom left corner (for the same reason). See screen shot below:

The remedy for that is the css below (I added more selectors for various table-tr, tbody-tr, thead-tr combinations as needed, so you can also expand it to fit your markup):

        table td,
        table th{
            border: 1px solid #666;
        }

        table{
            width: 98%;
            border-spacing: 0px;
        }

         /* alternating table row colors*/
        tr:nth-child(even)  { background-color:#f6f6f6; }
        tr:nth-child(odd)   { background-color:#ffffff; }

        /* set all corner radii initially to zero */
        th, td {
            border-radius: 0;
        }
        
        /*set only specific radii per corner (don't use the border-radius shorthand)*/
        thead tr:first-child th:first-child, 
        table tr:first-child td:first-child,
        tbody tr:first-child th:first-child {
            border-top-left-radius: 0.6em;
        }
        thead tr:first-child th:last-child, 
        table tr:first-child td:last-child,
        tbody tr:first-child th:last-child {
            border-top-right-radius: 0.6em;
        }
        tbody tr:last-child td:first-child, 
        table tr:last-child td:first-child,
        tbody tr:last-child th:first-child {
            border-bottom-left-radius: 0.6em;
        }
        tbody tr:last-child td:last-child, 
        table tr:last-child td:last-child,
        tbody tr:last-child th:last-child {
            border-bottom-right-radius: 0.6em;
        }

        thead + tbody tr td,
        tr + tr td ,
        tr + tr th {
            border-top: 0;
        }

        tr th + th,
        tr td + td {
            border-left: 0;
        }

        /* shade th cells */
        table th {
            background-color: #888;
            color: #FFF;
        }

This results in the screenshot below, as desired:

All credit for this solution still goes to David Thomas, especially for the adjacent cells border trick!