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>
HTML and CSS: rounded corners on tables
Add "overflow:hidden" on the table itself:
table {
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: normal;
border-collapse: collapse;
width: 100%;
border-radius: 15px;
/* add this */
overflow:hidden
}
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;
}
HTML and CSS: how to make rounded corners on tables main corners
You likely have to add
table { overflow: hidden; }
in order to let the (invisible) border actually snip off the content inside. Currently, if you were to make the border visible (border: 1px solid red;
) you'll see that your curved corners work just fine, but that the cell contents just stick out beyond the border.
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.
Round table corners
You need to round corners for the first and last columns of your first and last row in your table.
Something like this:
table tr:first-child th:first-child {
border-top-left-radius: 10px;
}
table tr:first-child th:last-child {
border-top-right-radius: 10px;
}
table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
You can see your updated fiddle
Rounded corners for html table
You need to rewrite CSS code.
.tier_price_break{
border-radius:8px;
border:1px solid #cde2f5;
background:#fff;
}
.tier_price_break thead th{
border:none;
border-bottom:1px solid #cde2f5;
}
.tier_price_break thead th:nth-child(2){
border-left:1px solid #cde2f5;
}
.tier_price_break tbody td{
border:1px solid transparent;
}
Please check this link
https://jsfiddle.net/aasim2001/k012wy0f/#&togetherjs=6lc9KgDEuf
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;
}
CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?
I figured it out. You just have to use some special selectors.
The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:
table tr:last-child td:first-child {
border: 2px solid orange;
border-bottom-left-radius: 10px;
}
table tr:last-child td:last-child {
border: 2px solid green;
border-bottom-right-radius: 10px;
}
<table>
<tbody>
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
<td>
4
</td>
</tr>
</tbody>
</table>
Related Topics
Css Set Background-Image by Data-Image Attr
Access Iframe Content from a Chrome'S Extension Content Script
How to Use Text-Overflow:Ellipsis on Multiline Text
Html/Css Hexagon With Image Inside
Full Width Backgrounds on Outlook '07/'10/'13
How to Make an Editable Div Look Like a Text Field
Ordered List (Html) Lower-Alpha With Right Parentheses
Inline Elements and Line-Height
Chrome Download Attribute Not Working
Why Does the Checkbox Stay Checked When Reloading the Page
How to Draw a Trapezium/Trapezoid with CSS3
CSS Background Image Not Loading
Best Way to Include Css? Why Use @Import
How to Remove the Underline For Anchors(Links)
Is Html5 Localstorage Asynchronous
What Characters Are Allowed in the HTML Name Attribute Inside Input Tag