How to create rounded corners only for Table Head

Question

I would like to know how to create rounded corners only on the table head?

Additional detail ... I want the rest of the table, a rectangle, to rest on the head of the mast, only the first line of the title should have rounded corners.

Answer 1

The problem is that you need to make certain internal elements round.

So you have to do the first and last round to get the solution you want.

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

Answer 2

It would be easier to help you if you saw your code, or at least the code that didn't work for you.

In any case, this tutorial seems relevant to your question http://www.jeox.com/docs/manual/web/round_table_corners.html

EDIT: Or this http://blog.jezmckean.com/css3-rounded-table-corners-no-images/

Answer 3

There are several options. It depends on what you really want to achieve visually.

But make sure border-collapse NOT set to collapse, because this will not work. For more information, see mozilla Link: https://developer.mozilla.org/en/CSS/border-radius

 #uno, #due th, #tre th { border-top-right-radius: 10px; border-top-left-radius: 10px; border: 1px solid black; } #tre td { border: 1px solid black; } 

 <table id="uno" border="0"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> <br> <table id="due" border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> <br> <table id="tre" border="0"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>