im trying to make rounded border table.
but im getting little problem with border,
the table border is not rounded..
grid1 { width:100%; border:1px solid #000}
here is the example
http://jsfiddle.net/NHNFx/
<table class="grid1">
<tr>
<th>Salutation</th>
<td>MR</td>
</tr>
<tr>
<th>First Name</th>
<td>Greg</td>
</tr>
<tr>
<th>Last Name</th>
<td>Oden</td>
</tr>
</table>
table { border-collapse:collapse; border-spacing:0; border:0; }
.grid1 { width:100%; border:1px solid #000}
.grid1 tr th { width:115px; padding:20px; background:blue; border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;}
.grid1 tr td { padding:20px; background:#f9f9f9; border-bottom:1px solid #c8c8c8; }
.grid1 tr:first-child th { border-radius:2em 0 0 0; }
.grid1 tr:last-child th { border-radius:0 0 0 2em ; }
.grid1 tr:first-child td:last-child { border-radius:0 2em 0 0; }
.grid1 tr:last-child td:last-child { border-radius:0 0 2em 0 ; }
plz help me...
You need to remove border-collapse property which prevents the borders to be rounded, anyways you are using border-spacing: 0; so you don't have to use border-collapse for your table
Demo
Try This
table {
border-collapse: separate;
border-spacing: 0;
}
table, td {
border: 1px solid #404040;
border-radius: 7px;
-moz-border-radius: 7px;
padding: 7px;
}
Related
I have a table that appears to have rows with different sizes. I would like to place a shadow box-shadow: 0 0 13px black around each blue border.
Simply putting the shadow on tr obviously doesn't do it:
I have tried to play with the shadow on td but without success, mostly because the shadow bleeds between cells.
Any ways to do that?
My code below.
<table>
<tbody>
<tr class="A">
<td>A1</td><td>A2</td><td>A3</td><td>A4</td>
</tr>
<tr class="B">
<td></td><td>B2</td><td>B3</td><td>B4</td>
</tr>
<tr class="C">
<td></td><td></td><td>C3</td><td>C4</td>
</tr>
<tr class="D">
<td>D1</td><td>D2</td><td>D3</td><td>D4</td>
</tr>
</tbody>
</table>
table {
border-collapse: separate;
border-spacing: 0 20px;
width: 300px;
text-align: center;
}
tr {
height: 40px;
/* box-shadow: 0 0 13px black; */
}
td {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
td:last-child {
border-right: 2px solid blue;
}
.A td:nth-child(1) {border-left: 2px solid blue;}
.B td:nth-child(1) {border: none;}
.B td:nth-child(2) {border-left: 2px solid blue;}
.C td:nth-child(1) {border: none;}
.C td:nth-child(2) {border: none;}
.C td:nth-child(3) {border-left: 2px solid blue;}
.D td:nth-child(1) {border-left: 2px solid blue;}
You have to use the CSS filter property on the tr element to make shadows as you wanted.
CSS shadow on tr element
tr {filter: drop-shadow(5px 5px 5px #222222);}
Im pretty sure you can't do it without javascript because you need extra element between rows. You can do it like this:
$("tr").each(function() {
$("<div class='clearfix'></div>").insertBefore(this);
})
table, tr, td {
box-sizing:border-box;
}
.clearfix:before, .clearfix:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
table {
border:2px solid #0f0;
padding:0 10px;
}
table tr {
float:right;
box-shadow:0px 0px 10px rgba(0,0,0,0.4);
margin:10px 0;
}
table td {
width:100px;
text-align:center;
border:2px solid #f00;
}
table td:empty {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="A">
<td>A1</td><td>A2</td><td>A3</td><td>A4</td>
</tr>
<tr class="B">
<td></td><td>B2</td><td>B3</td><td>B4</td>
</tr>
<tr class="C">
<td></td><td></td><td>C3</td><td>C4</td>
</tr>
<tr class="D">
<td>D1</td><td>D2</td><td>D3</td><td>D4</td>
</tr>
</tbody>
</table>
I've encountered an issue with border style and IE11 being different than the way firefox and chrome display it.
In IE11, on the green and blue colored elements, there is a bevel visible on the bottom right corner when the bottom-boarder and right-boarder are different colors.
That beveling is not visible in chrome and firefox. I can't seem to find anything that will eliminate that in IE11. Any ideas?
Example code:
https://jsfiddle.net/s4pecmv5/3/
body{
background-color:white;
}
.container{
display:table;
width:auto;
border-radius:3px;
}
.container,table,table tr{
border: 3px solid lightgray;
}
table{
border-collapse:collapse;
}
table,table tr{
padding:0px;
margin:0px;
}
table td {
border:none;
padding:15px;
text-align:center;
}
table thead {
background-color:lightgray;
}
table thead td {
font-weight:bold;
color:darkgray;
text-transform:uppercase;
}
table td:nth-child(1){
text-align:left;
}
table tbody td:nth-child(2),
table tbody td:nth-child(3){
color:white;
font-weight:bold;
}
table tbody td:nth-child(2){
border-top:3px solid green;
border-bottom:3px solid green;
border-right:3px solid white;
background-color:lightgreen;
box-shadow: inset 0px 0px 0px 10px green;
}
table tbody td:nth-child(3){
border-top:3px solid blue;
border-bottom:3px solid blue;
background-color:lightblue;
box-shadow: inset 0px 0px 0px 10px blue;
}
table tbody tr:first-child td {
border-top:3px solid lightgray;
}
table tbody tr:last-child td {
border-bottom:3px solid lightgray;
}
<div class="container">
<table>
<thead>
<tr>
<td>afdas sdf sadf</td>
<td>dfhfd</td>
<td>gjklg</td>
</tr>
</thead>
<tbody>
<tr>
<td>afdas sdf sadf</td>
<td>dfhfd</td>
<td>gjklg</td>
</tr>
<tr>
<td>afdas sdf sadf</td>
<td>dfhfd</td>
<td>gjklg</td>
</tr>
<tr>
<td>afdas sdf sadf</td>
<td>dfhfd</td>
<td>gjklg</td>
</tr>
<tr>
<td>afdas sdf sadf</td>
<td>dfhfd</td>
<td>gjklg</td>
</tr>
</tbody>
</table>
</div>
Chrome screenshot:
IE11 screenshot:
In your "td:nth-child" classes you had a border on the top and bottom of each td.
border-top:3px solid green;
border-bottom:3px solid green;
You also have a border on the tr:
border: 3px solid lightgray;
This results in a double border look on the "td" change the following classes:
.container, table{
border: 3px solid lightgray;
}
table tbody td:nth-child(2){
border-right:3px solid white;
background-color:lightgreen;
box-shadow: inset 0px 0px 0px 10px green;
}
table tbody td:nth-child(3){
background-color:lightblue;
box-shadow: inset 0px 0px 0px 10px blue;
}
I tested in Chrome IE11 and Firefox and the bevel border is removed.
Bootstrap 3 has dropped rounded corners on tables. Which styles should I apply to get them back when I apply the .table-bordered class, please?
UPDATE
So far I've come to this code, with no effect.
CSS taken from Bootstrap 2.3.2:
.table-bordered
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child
{
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
}
.table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered tfoot:last-child tr:last-child > th:first-child
{
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
}
HTML code:
<table class="table table-hover table-responsive table-bordered">
<thead>
<tr>
<th style="width: 50%">
Config. Name
</th>
<th>
API Calls
</th>
<th>
Current Amount
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Agennda
</td>
<td>
2,876
</td>
<td>
$ 80.67
</td>
<td>
Edit
</td>
</tr>
</tbody>
</table>
If you surround the table with a panel you get your rounded corners.
Like this:
<div class="panel panel-default">
<table class="table table-bordered">
....
</table>
</div>
"table-responsive" goes on a div that wraps the table, not on the table itself.
In normalize.less there is the table reset which include border-collapse:collapse. This was not in the 2.x of Bootstrap. Because of this new reset, there are no rounded corners as those have to be border-collapse:separate. You have to make a separate class and set it up accordingly.
<table class="table table-curved">
Only works with "table-hover" and "table-striped" NOT table-bordered. The borders are included in this style.
.table-curved {
border-collapse: separate;
}
.table-curved {
border: solid #ccc 1px;
border-radius: 6px;
border-left:0px;
}
.table-curved td, .table-curved th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.table-curved th {
border-top: none;
}
.table-curved th:first-child {
border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
border-radius: 0 0 6px 0;
}
LESS
// Added Rounded Corner Tables
.table-curved {
border-collapse: separate;
border: solid #table-border-color 1px;
border-radius: #table-radius;
border-left:0px;
td, th {
border-left: 1px solid #table-border-color;
border-top: 1px solid #table-border-color;
}
th {
border-top: none;
}
th:first-child {
border-radius: #table-radius 0 0 0;
}
th:last-child {
border-radius: 0 #table-radius 0 0;
}
th:only-child{
border-radius: #table-radius #table-radius 0 0;
}
tr:last-child td:first-child {
border-radius: 0 0 0 #table-radius;
}
tr:last-child td:last-child {
border-radius: 0 0 #table-radius 0;
}
}
Using Christina's answer and this thread , i came up with this CSS to get the rounded corners in tables with or without THEAD.
.table-curved {
border-collapse: separate;
border: solid #ccc 1px;
border-radius: 6px;
border-left: 0px;
border-top: 0px;
}
.table-curved > thead:first-child > tr:first-child > th {
border-bottom: 0px;
border-top: solid #ccc 1px;
}
.table-curved td, .table-curved th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.table-curved > :first-child > :first-child > :first-child {
border-radius: 6px 0 0 0;
}
.table-curved > :first-child > :first-child > :last-child {
border-radius: 0 6px 0 0;
}
.table-curved > :last-child > :last-child > :first-child {
border-radius: 0 0 0 6px;
}
.table-curved > :last-child > :last-child > :last-child {
border-radius: 0 0 6px 0;
}
I assume you are not using the source less-files. However, in normalize.less, bootstrap 3.0RC is adding:
// ==========================================================================
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}
This border-collapse thing destroys the rounded borders on tables.
So, by simply override that in your table-bordered you turn on the effect:
.table-bordered
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-collapse: inherit;
}
I think it may work.
The following one works quite nicely for me:
.table-curved {
border-collapse: separate;
}
.table-curved {
border: solid #ccc 1px;
border-radius: 6px;
}
.table-curved td, .table-curved th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.table-curved tr > *:first-child {
border-left: 0px;
}
.table-curved tr:first-child > * {
border-top: 0px;
}
Though it does not of course work for nested tables.
For the sake of bootstrappiness:
.table-curved {
border-collapse: separate;
border: solid #table-border-color 1px;
border-radius: #border-radius-base;
border-left: 0px;
border-top: 0px;
> thead:first-child > tr:first-child > th {
border-bottom: 0px;
border-top: solid #table-border-color 1px;
}
td, th {
border-left: 1px solid #table-border-color;
border-top: 1px solid #table-border-color;
}
> :first-child > :first-child > :first-child {
border-radius: #border-radius-base 0 0 0;
}
> :first-child > :first-child > :last-child {
border-radius: 0 #border-radius-base 0 0;
}
> :last-child > :last-child > :first-child {
border-radius: 0 0 0 #border-radius-base;
}
> :last-child > :last-child > :last-child {
border-radius: 0 0 #border-radius-base 0;
}
}
This is another solution that may be far simpler than the above ones. This will select the first and last th elements and apply a border to their respective corners. You can then add a radius to the overall table.
.table {
border-radius: 5px;
}
th:first-of-type {
border-top-left-radius: 5px;
}
th:last-of-type {
border-top-right-radius: 5px;
}
If you have only 1 cell in the first row or last row this one will work.
(Added a fix to the code of: Ruben Stolk)
.table-curved {
border-collapse: separate;
border: solid #table-border-color 1px;
border-radius: #border-radius-base;
border-left: 0px;
border-top: 0px;
> thead:first-child > tr:first-child > th {
border-bottom: 0px;
border-top: solid #table-border-color 1px;
}
td, th {
border-left: 1px solid #table-border-color;
border-top: 1px solid #table-border-color;
}
> :first-child > :first-child > :first-child {
border-radius: #border-radius-base 0 0 0;
}
> :first-child > :first-child > :last-child {
border-radius: 0 #border-radius-base 0 0;
}
> :first-child > :first-child > :only-child{
border-radius: #border-radius-base #border-radius-base 0 0;
}
> :last-child > :last-child > :first-child {
border-radius: 0 0 0 #border-radius-base;
}
> :last-child > :last-child > :last-child {
border-radius: 0 0 #border-radius-base 0;
}
> :last-child > :last-child > :only-child{
border-radius: 0 0 #border-radius-base #border-radius-base;
}
}
The answer above on wrapping the table with a panel (<div class="panel panel-default">) seems to work the best.
However, as mentioned in the comments, you do need to remove the top border on the table.
I used this SCSS to do this, so thought I would share:
// remove extra top border on tables wrapped in a panel
.panel {
& > .table-responsive > .table.table-bordered, & > .table.table-bordered {
& > tbody:first-child, & > thead:first-child {
& > tr:first-child {
td, th {
border-top: none;
}
}
}
}
}
Use table-bordered-curved instead table-bordered
.table-bordered-curved {
border-radius: 4px;
border-collapse: separate;
border: solid 1px #ccc;
}
.table-bordered-curved thead tr:last-child th,
.table-bordered-curved thead tr:last-child td {
border-bottom: solid 1px #ccc;
}
.table-bordered-curved thead tr th,
.table-bordered-curved thead tr td {
border-bottom: 0;
border-right: solid 1px #ccc;
}
.table-bordered-curved thead tr th:last-child,
.table-bordered-curved thead tr td:last-child {
border-right: 0;
}
.table-bordered-curved tbody tr:first-child th,
.table-bordered-curved tbody tr:first-child td {
border-top: 0;
}
.table-bordered-curved tbody tr td {
border-right: solid 1px #ccc;
}
.table-bordered-curved tbody tr td:last-child {
border-right: 0;
}
This was the only solution that worked for me in Bootstrap 4. The card class only put a background behind my table.
<table class="table table-dark table-striped">
<thead>
<tr>
<th class="rounded-top" scope="col" colspan="3">Perofrmance</th>
</tr>
</thead>
<thead>
<tr>
<th scope="col">Strategy</th>
<th scope="col">YTD</th>
<th scope="col">Max DD</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">BTCUSD:</th>
<td>
<b>15</b>%
</td>
<td>
<b>20</b>%
</td>
</tr>
<tr style="border-bottom: transparent;">
<th scope="row" style="border-bottom-left-radius: .25rem!important;">ETHUSD:
</th>
<td>
<b>12.6</b>%
</td>
<td style="border-bottom-right-radius: .25rem!important;">
<b id="valueETHDD">0</b>%
</td>
</tr>
</tbody>
</table>
I created a table in HTML5 and used CSS to make it pretty. Then I decided to add a scroll bar and used webkit to change the style of that. Now after I used a div to get my scroll bar working it seems like my CSS code for the tbody,tr,thead,etc. are not working. I was wondering what I am doing wrong. I am positive that I am not calling the html table attributes correctly. I am very new to html5 and css but would really like to learn more.
Here is my code:
UPDATED 7/11/2013 9:36pm
CSS CODE
::-webkit-scrollbar {
width: 12px;
color:crimson;
background-color: black;
border-radius: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color:black;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background-color:gray;
}
.mytablecontainer #mytable{
width:500px;
border-collapse:separate;
background:crimson;
border-radius: 15px;
}
.mytablecontainer tbody {
overflow: auto;
height: 150px;
float: left;
width: 100%;
}
.mytablcontainer #mytable td {
text-align:center;
background:gray;
border-bottom:5px solid black;
border-radius: 15px;
}
.mytablecontainer #mytable th {
font-weight:bold;
text-align:center;
background:crimson;
border-bottom:5px solid black;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
float: left;
width: 100%;
}
.mytablecontainer #mytable tr {
width: 100%;
display: table;
}
HTML5 CODE
<div class="mytablecontainer">
<table id="mytable">
<thead>
<tr>
<span>
Playlist
</span>
</tr>
</thead>
<tbody>
<tr>
<td> <span>
LINK 1
</span>
</td>
</tr>
<tr>
<td> <span>
LINK 2
</span>
</td>
</tr>
<tr>
<td> <span>
LINK 3
</span>
</td>
</tr>
<tr>
<td> <span>
LINK 4
</span>
</td>
</tr>
<tr>
<td> <span>
LINK 5
</span>
</td>
</tr>
<tr>
<td> <span>
LINK 6
</span>
</td>
</tr>
<tr>
<td> <span>
LINK 7
</span>
</td>
</tr>
</tbody>
</table>
</div>
.mytablcontainer #mytable.td {} remove "." dot before td and correct the spelling of your class
.mytablecontainer #mytable td {}
Demo
you do not need to call each time your main div selector try this css
::-webkit-scrollbar {
width: 12px;
color:crimson;
background-color: black;
border-radius: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color:black;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background-color:gray;
}
.mytablecontainer #mytable{
width:500px;
border-collapse:separate;
background:crimson;
border-radius: 15px;
}
#mytable tbody {
overflow: auto;
height: 150px;
float: left;
width: 100%;
}
#mytable td {
text-align:center;
background:gray;
border-bottom:5px solid black;
border-radius: 15px;
}
#mytable th {
font-weight:bold;
text-align:center;
background:crimson;
border-bottom:5px solid black;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
float: left;
width: 100%;
}
#mytable tr {
width: 100%;
display: table;
}
for multiple attribute use this:
#mytable table, #mytable th, #mytable td {
border: 1px solid black;
border-collapse: collapse;
}
Does anyone know how to style tr as we like?
I've used border-collapse on table, after that tr's can display 1px solid border I give them.
However, when I've tried -moz-border-radius, it doesn't work. Even simple margin doesn't work.
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>
Be sure to provide all the vendor prefixes. You can see it in action on JSFiddle too.
Actual Spacing Between Rows
This is an old thread, but I noticed reading the comments from the OP on other answers that the original goal was apparently to have border-radius on the rows, and gaps between the rows. It does not appear that the current solutions exactly do that. theazureshadow's answer is headed in the right direction, but seems to need a bit more.
For those interested in such, here is a fiddle that does separate the rows and applies the radius to each row. (NOTE: Firefox currently has a bug in displaying/clipping background-color at the border radii.)
The code is as follows (and as theazureshadow noted, for earlier browser support, the various vendor prefixes for border-radius need added).
table {
border-collapse: separate;
border-spacing: 0 10px;
margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
border: solid 1px #000;
border-style: solid none;
padding: 10px;
background-color: cyan;
}
td:first-child {
border-left-style: solid;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
td:last-child {
border-right-style: solid;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
Bonus info: border-radius has no effect on tables with border-collapse: collapse; and border set on td's. And it doesn't matter if border-radius is set on table, tr or td—it's ignored.
http://jsfiddle.net/Exe3g/
The tr element does honor the border-radius. Can use pure html and css, no javascript.
JSFiddle link: http://jsfiddle.net/pflies/zL08hqp1/10/
tr {
border: 0;
display: block;
margin: 5px;
}
.solid {
border: 2px red solid;
border-radius: 10px;
}
.dotted {
border: 2px green dotted;
border-radius: 10px;
}
.dashed {
border: 2px blue dashed;
border-radius: 10px;
}
td {
padding: 5px;
}
<table>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr class='dotted'>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class='solid'>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr class='dotted'>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr class='dashed'>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>
According to Opera the CSS3 standard does not define the use of border-radius on TDs. My experience is that Firefox and Chrome support it but Opera does not (don't know about IE). The workaround is to wrap the td content in a div and then apply the border-radius to the div.
All the answers are way too long. The easiest way to add border radius to a table element that accepts border as a property, is doing border radius with overflow: hidden.
border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;
I think collapsing your borders is the wrong thing to do in this case. Collapsing them basically means that the border between two neighboring cells becomes shared. This means it's unclear as to which direction it should curve given a radius.
Instead, you can give a border radius to the two lefthand corners of the first TD and the two righthand corners of the last one. You can use first-child and last-child selectors as suggested by theazureshadow, but these may be poorly supported by older versions of IE. It might be easier to just define classes, such as .first-column and .last-column to serve this purpose.
Not trying to take any credits here, all credit goes to #theazureshadow for his reply, but I personally had to adapt it for a table that has some <th> instead of <td> for it's first row's cells.
I'm just posting the modified version here in case some of you want to use #theazureshadow's solution, but like me, have some <th> in the first <tr>. The class "reportTable" only have to be applied to the table itself.:
table.reportTable {
border-collapse: separate;
border-spacing: 0;
}
table.reportTable td {
border: solid gray 1px;
border-style: solid none none solid;
padding: 10px;
}
table.reportTable td:last-child {
border-right: solid gray 1px;
}
table.reportTable tr:last-child td{
border-bottom: solid gray 1px;
}
table.reportTable th{
border: solid gray 1px;
border-style: solid none none solid;
padding: 10px;
}
table.reportTable th:last-child{
border-right: solid gray 1px;
border-top-right-radius: 10px;
}
table.reportTable th:first-child{
border-top-left-radius: 10px;
}
table.reportTable tr:last-child td:first-child{
border-bottom-left-radius: 10px;
}
table.reportTable tr:last-child td:last-child{
border-bottom-right-radius: 10px;
}
Feel free to adjust the paddings, radiuses, etc to fit your needs. Hope that helps people!
CSS:
tr:first-child th:first-child {
border-top-left-radius: 70px;
border-bottom-left-radius: 70px;
}
tr:first-child th:last-child {
border-top-right-radius: 70px;
border-bottom-right-radius: 70px;
}
You can also use outline:
table {
border-radius: 10px;
outline: 1px solid gray;
}
I found that adding border-radius to tables, trs, and tds does not seem to work 100% in the latest versions of Chrome, FF, and IE. What I do instead is, I wrap the table with a div and put the border-radius on it.
<div class="tableWrapper">
<table>
<tr><td>Content</td></tr>
<table>
</div>
.tableWrapper {
border-radius: 4px;
overflow: hidden;
}
If your table is not width: 100%, you can make your wrapper float: left, just remember to clear it.
Or use box-shadow if table have collapse
Use border-collapse:seperate; and border-spacing:0; but only use border-right and border-bottom for the tds, with border-top applied to th and border-left applied to only tr td:nth-child(1).
You can then apply border radius to the corner tds (using nth-child to find them)
https://jsfiddle.net/j4wm1f29/
<table>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
</table>
table {
border-collapse: seperate;
border-spacing: 0;
}
tr th,
tr td {
padding: 20px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
tr th {
border-top: 1px solid #000;
}
tr td:nth-child(1),
tr th:nth-child(1) {
border-left: 1px solid #000;
}
/* border radius */
tr th:nth-child(1) {
border-radius: 10px 0 0 0;
}
tr th:nth-last-child(1) {
border-radius: 0 10px 0 0;
}
tr:nth-last-child(1) td:nth-child(1) {
border-radius: 0 0 0 10px;
}
tr:nth-last-child(1) td:nth-last-child(1) {
border-radius: 0 0 10px 0;
}
Here's an example that puts a border with radius on a single row:
table { border-collapse: separate; border-spacing: 0; }
td { padding: 5px; }
.rowBorderStart {
border: 1px solid #000;
border-right: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.rowBorderMiddle {
border: 1px solid #000;
border-left: 0px;
border-right: 0px;
}
.rowBorderEnd {
border: 1px solid #000;
border-left: 0px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
<table>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td class='rowBorderStart'>2.1</td><td class='rowBorderMiddle'>2.2</td><td class='rowBorderEnd'>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>
According to #Craigo answer, I make some minor change, take a look:)
table {
border-collapse: separate;
border-spacing: 0 16px;
}
tr td {
border: 1px solid transparent;
transition: all ease 0.3s;
padding: 5px;
}
tr td:first-child {
border-right: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
tr td:last-child {
border-left: 0px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
tr td:not(:first-child, :last-child) {
border-left: 0px;
border-right: 0px;
}
tr:hover td:first-child {
border-color: black;
border-right: 0px;
}
tr:hover td:last-child {
border-color: black;
border-left: 0px;
}
tr:hover td:not(:first-child, :last-child) {
border-color: black;
border-left: 0px;
border-right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to add border radius on table row</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</body>
</html>
Use the below code to round the corners of the table:
thead th:first-child{border-top-right-radius: 15px;}
thead th:last-child{border-top-left-radius: 15px;}
tbody tr:last-child>td:first-child{border-bottom-right-radius: 15px;}
tbody tr:last-child>td:last-child{border-bottom-left-radius: 15px;}
I would Suggest you use .less instead,
change your .css file to .less and use the following code:
table {
border-collapse: separate;
border-spacing: 0;
}
td {
border: solid 1px #000;
border-style: none solid solid none;
padding: 10px;
}
tr td:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
tr td:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
tr td {
border-top-style: solid;
}
tr td:first-child {
border-left-style: solid;
}
tr{
cursor: pointer;
}
tr:hover{
td{
background-color: red;
}
}