Astronaut
Astronaut

Reputation: 7051

How-to create rounded corners on Table Head only

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

Additional detail... I want to have a rouded head of the table the rest of the table is a rectangle just the first header row should have rounded corners.

Upvotes: 33

Views: 47740

Answers (3)

Bram Vanroy
Bram Vanroy

Reputation: 28505

There are a number of options. It depends on what you really want to achieve visually.

But be sure that border-collapse is NOT set to collapse, because that will not work. For more information, see this 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>

Upvotes: 4

Sven Bieder
Sven Bieder

Reputation: 5681

The problem is, that you need to make the certain inner elements round.

So you have to make for the first th and the last th round to get the wished solution.

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

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

Upvotes: 62

TryHarder
TryHarder

Reputation: 2777

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

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

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

Upvotes: 3

Related Questions