I'm trying to create a photo frame with a HTML table and some CSS.
I want to add an inner border-radius to it, but I can't find a way to color "edges" (spaces between "normal border" and "border with radius").
Here's a fiddle that showcases my problem. The objective is to color the edges of the center cell, without coloring it (it must be transparent to show what's underneath, the table background color in the example).
table {
border-spacing: 0;
background-color: aqua;
}
td {
border: solid 1px red;
padding: 50px;
background-color: red;
}
td.middle {
border-radius: 50px;
border: 1px solid green;
background-color: transparent;
}
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 class="middle">2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
you need to consider a new element inside your td
if there gonna be an image , you won't need that span inside your div
table {
border-spacing: 0;
background-color: aqua;
}
td {
border: solid 1px red;
padding: 50px;
background-color: red;
}
td.middle {
padding: 0px;
}
#center_frame{
width: 100px;
height: 100px;
margin: auto;
border-radius: 50px;
border: 1px solid green;
border: solid 1px red;
background-color: lightblue;
text-align: center;
}
#center_frame span {
line-height: 100px;
}
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 class="middle">
<div id="center_frame"><span>2.2</span></div>
</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
Use radial-gradient for this
table {
border-spacing: 0;
background-color: aqua;
}
td {
border: solid 1px red;
padding: 50px;
background-color: red;
}
td.middle {
background:radial-gradient(farthest-side,transparent 99%,red 100%);
}
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 class="middle">2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
For a custom radius you will need 4 gradient:
table {
border-spacing: 0;
background-color: aqua;
}
td {
border: solid 1px red;
padding: 50px;
background-color: red;
}
td.middle {
background:
radial-gradient(farthest-side at bottom left, transparent 98%,red 100%) top right,
radial-gradient(farthest-side at bottom right,transparent 98%,red 100%) top left,
radial-gradient(farthest-side at top left, transparent 98%,red 100%) bottom right,
radial-gradient(farthest-side at top right,transparent 98%,red 100%) bottom left;
background-size:25% 25%; /* adjust this to control the radius (from 0% to 50% or pixel value) */
background-repeat:no-repeat;
}
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 class="middle">2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
I have a table. I want that when user mouse up a row, the selected row is having this:
.list-orders tr:hover {
border-top: 1px solid #f2f2f2;
border-bottom: 2px solid #cccccc;
}
However, when those borders are getting applied, the whole table and its rows is like getting blink up and down.
I want to achieve something like Gmail hover effect.
How can I fix this?
If you want the same as Gmail you can use box-shadow instead of applying borders to the tr element.
.list-orders tr:hover {
box-shadow: 0 0 0 1px #000000;
}
<table class="list-orders">
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</table>
Box Shadow
Easier to use box-shadow:
tr:hover
{
box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0,
0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); */
}
Helper: https://www.cssmatic.com/box-shadow
tr td{
cursor: pointer;
}
tr:hover
{
box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0,
0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); */
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
Borders
By borders - less flexible (Buggy when you set diff bottom/top borders).
Set before (Transparent + width) & Hover (change color + width)
tr {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
tr:hover td {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
table {
border-collapse: collapse;
}
tr td{
cursor: pointer;
}
tr {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
tr:hover td {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
I'm trying to create a simple 3x3 grid (using <table>) with all cells having a 1px border. If I simply use CSS to give all <td> elements a 1px border then the inner borders will stack and create 2px border so I'm treating each <td> differently. I have succeeded in doing it that way and used nth child to reduce the CSS. However, my question is why a certain logical way that uses even less CSS selectors doesn't work.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>3x3 grid</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
Here is the CSS that works:
td{
border: 1px #000;
width:30px;
height: 30px;
text-align: center;
border-style: solid;
}
tr:nth-child(2) td{
border-top: 0px;
}
tr:nth-child(3) td{
border-top: 0px
}
td:nth-child(1){
border-right: 0px;
}
td:nth-child(3){
border-left: 0px;
}
table{
border-spacing: 0px;
border-collapse: separate;
}
Here is the CSS that uses one less selector and should work but somehow all upper cells end up with no top borders.
td{
border: 1px #000;
border-top: 0px;
width:30px;
height: 30px;
text-align: center;
border-style: solid;
}
tr:nth-child(1) td{
border-top: 1px;
}
td:nth-child(1){
border-right: 0px;
}
td:nth-child(3){
border-left: 0px;
}
table{
border-spacing: 0px;
border-collapse: separate;
}
I tested it with both Safari and Firefox. Also please tell me if there is a better way to do it.
The reason you have no top border on your td's is because you aren't declaring a border-style or border-color...
tr:nth-child(1) td{
border-top: 1px;
}
should be...
tr:nth-child(1) td{
border-top: 1px solid #000;
}
You could simplify this greatly by just using border-collapse: collapse
td{
border: 1px #000;
width:30px;
height: 30px;
text-align: center;
border-style: solid;
}
table{
border-collapse: collapse;
}
<table>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
You can simply do that by below code only :
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
I don't know why, but td's in first row have changed from solid to none. Try using:
tr:nth-child(1) td{
border-top: solid black 1px;
}
in CSS and should be right. http://jsfiddle.net/u1d1ctcy/
I am new to designing,can anyone please suggest me how to design a table with fixed row header at the top and should be able to see the data under relevant columns by scrolling with fixed header.Either using tables or divs please.
Is this DEMO what you need?
<div style="margin: 0; padding: 0; border-collapse: collapse; width: 519px; height: 100px; overflow: hidden; border: 1px solid black;">
<table style="margin: 0; padding: 0; border-collapse: collapse; color: White; width: 517px; height: 20px; text-align: left; background-color: Blue;">
<colgroup>
<col width="200px"/>
<col width="150px"/>
<col width="150px"/>
<col width="16px"/>
</colgroup>
<tbody>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<th style="margin: 0; padding: 0; border-collapse: collapse;">
Column 1
</th>
<th style="margin: 0; padding: 0; border-collapse: collapse;">
Column 2
</th>
<th style="margin: 0; padding: 0; border-collapse: collapse;">
Column 3
</th>
<th style="margin: 0; padding: 0; border-collapse: collapse;">
</th>
</tr>
</tbody>
</table>
<div style="margin: 0; padding: 0; border-collapse: collapse; width: 517px; height:77px; overflow: auto;"
>
<table style="margin: 0; padding: 0; border-collapse: collapse; width: 500px;">
<colgroup>
<col width="200px"/>
<col width="150px"/>
<col width="150px"/>
</colgroup>
<tbody style="margin: 0; padding: 0; border-collapse: collapse;">
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;">
Row A-1
</td>
<td style="border: 1px solid lightgrey;">
Row A-2
</td>
<td style="border: 1px solid lightgrey;">
Row A-3
</td>
</tr>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;">
Row B-1
</td>
<td style="border: 1px solid lightgrey;">
Row B-2
</td>
<td style="border: 1px solid lightgrey;">
Row B-3
</td>
</tr>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;">
Row C-1
</td>
<td style="border: 1px solid lightgrey;">
Row C-2
</td>
<td style="border: 1px solid lightgrey;">
Row C-3
</td>
</tr>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;"
>
Row D-1
</td>
<td style="border: 1px solid lightgrey;">
Row D-2
</td>
<td style="border: 1px solid lightgrey;">
Row D-3
</td>
</tr>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;">
Row E-1
</td>
<td style="border: 1px solid lightgrey;">
Row E-2
</td>
<td style="border: 1px solid lightgrey;">
Row E-3
</td>
</tr>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;">
Row F-1
</td>
<td style="border: 1px solid lightgrey;">
Row F-2
</td>
<td style="border: 1px solid lightgrey;">
Row F-3
</td>
</tr>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;">
Row G-1
</td>
<td style="border: 1px solid lightgrey;">
Row G-2
</td>
<td style="border: 1px solid lightgrey;">
Row G-3
</td>
</tr>
</tbody>
</table>
</div>
</div>
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;
}
}