How-to create rounded corners on Table Head only
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;
}
Rounded table corners CSS only
Seems to work fine in FF and Chrome (haven't tested any others) with separate borders: http://jsfiddle.net/7veZQ/3/
Edit: Here's a relatively clean implementation of your sketch:
table {
border-collapse:separate;
border:solid black 1px;
border-radius:6px;
}
td, th {
border-left:solid black 1px;
border-top:solid black 1px;
}
th {
background-color: blue;
border-top: none;
}
td:first-child, th:first-child {
border-left: none;
}
<table>
<thead>
<tr>
<th>blah</th>
<th>fwee</th>
<th>spoon</th>
</tr>
</thead>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
</table>
Make a table with rounded corners on body not head, and have a background color
You need to remove the white background on the table and give the td cells a white background instead:
...
table {
border-collapse: separate;
border-radius: 10px;
}
td { background: #fff; }
...
Also - having inline style declarations (i.e. <tr style="...">
) isn't necessary: that is what your stylesheet is for. :)
Solving table rounded corner CSS
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.
Rounded corners for each row of an HTML table using only CSS?
Change your css to:
body {
background-color: #FFCBAA;
font-family: "Helvetica Neue";
}
h1 {
font-size: 2em;
}
table {
border-collapse: separate;
border-spacing: 0 0.5em;
}
tr {
font-size: 1.2em;
}
tr td {
padding: 15px 20px;
background-color: rgba(255, 238, 227, .93);
}
tr td:first-of-type {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
tr td:last-of-type {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
How to add border radius on table row
You can only apply border-radius to td, not tr or table. I've gotten around this for rounded corner tables by using these styles:
table {
border-collapse: separate;
border-spacing: 0;
}
td {
border: solid 1px #000;
border-style: none solid solid none;
padding: 10px;
}
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }
tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
Trying to create rounded corners on table but only one the edges
Your going to need to take the rounded corners code out of the table, td, th since that will apply the rounded corners code to all of those elements, but if you move it to the table { /* rounded corners code here */ } then it won't apply to the td's and the th's.
This code works for me on chrome.
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
.rounded_edges {
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px solid black;
}
</style>
</head>
<body>
<table class="rounded_edges">
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td>Cell 1-1</td>
<td>Cell 1-2</td>
<td>Cell 1-3</td>
</tr>
<tr>
<td>Cell 2-1</td>
<td>Cell 2-2</td>
<td>Cell 2-3</td>
</tr>
</table>
</body>
</html>
Related Topics
What Is The Replacement for The Child Selector
Considerations for CSS3 Transition Performance
Bootstrap: Multiple Nested Rows Within Row
How to Use HTML5 Now to Create a Website
Different Levels of CSS and The Priority Over Each Other
How to Give Outer Glow to an Object in a Transparent Png Using CSS3
Does The Shadow Dom Replace: :Before and: :After
CSS Horizontal Navigation Spacing
Font Awesome Icons Are Not Working in Some Browsers
How to Fade in and Out Color of Svg
How to Add Space Between Bootstrap Card Elements
Why Clear: Right Doesn't Work as Intended
Em Vs Px... for Mobile Browsers
Stretch List Items <Li> to Fill The Width of <Ul>
How to Make a CSS Triangle Background on a Div Without Using Border and Image
Media Queries - CSS Only for iPhone Landscape
Google Font API Uses Browser Detection. How to Get All Font Variations for Font-Face