i apply a border-radius to my table but it's not working
CSS :
table {
border: 1px solid;
border-radius: 10px;
border-collapse: collapse;
}
here's a FIDDLE
PS. i want to use border-collapse: collapse not border-collapse: separate
Did you try removing border-collapse: collapse?
table {
border: 1px solid;
border-radius: 10px;
}
remove your border-collapse
table{
border: 1px solid;
border-radius: 10px;
}
Edit this in your table:
table {
border: 2px solid black;
border-radius: 10px;
overflow:hidden;
}
And here is the edited fiddle: http://jsfiddle.net/piyushkmr/TExvf/7/
Box properties only works with DIV tag. you can do that if you want to create your table with DIV.
Related
I want to style my own button. I've managed to get rid of the default style, but now I want to add a thin blue border around it, but don't know how. If I just get rid of the border: none, then the default style comes back, which is not what I want
This is my style.css:
input#hideshow{
margin: 0;
border: none;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
You also need to specify border-style because it's default value is none demo.
But the easiest way is to use the border short hand and also specify
border-width:
border:1px solid #7BC2E3;
and remove border:none;
DEMO
CSS :
input#hideshow{
margin: 0;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border:1px solid #7BC2E3;
width: 280px;
text-align: left;
}
U just specified the border color alone. U forget to specify border width
Demo
border: 2px solid #7BC2E3;
Your CSS works perfectly. But you don't want it to work this way. You set border to none so no border is displayed. You better should set to, for instance:
border: 1px solid #7BC2E3;
And remove the border-color line.
https://developer.mozilla.org/en-US/docs/Web/CSS/border
Try doing this:
input#hideshow{
margin: 0;
border:1px solid blue;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
Hope this is what you want.
Try like this: Demo
border:1px solid #7BC2E3;
and remove
border:none from your code
Whenever I try to set left and right border for an inline-block element in my code, it won't work unless I set all.
border:2px solid black; /* does work */
border:0 2px solid black; /* doesn't work*/
Any idea?
the relevant part of CSS:
#highlights2{
width:640px;
text-align:left;
}
#highlights2 .highlight{
width:211px;
display:inline-block;
height:100px;
background-color:#0dc1d0;
}
#centerhighlight{
border:0 2px solid rgba(0,0,0,0.5);
border:2px solid black;
}
and HTML:
<div id="highlights2"><div class="highlight">asd</div><div style="" class="highlight" id="centerhighlight">fgh</div><div class="highlight">jkl</div></div>
This syntax is not valid for defining borders. If you want different styles for vertical and horizontal borders you need to write it longhand, for example:
border: 2px solid black;
border-top-width: 0;
border-bottom-width: 0;
If you want to use the shorthand for border width, you can use this:
border-width:0 2px;
border-style: solid;
border-color: black;
jsFiddle
I have the following CSS for my table :
table{
border: 1px solid black;
border-collapse: collapse;
}
tr{
border-bottom: 1px solid #a2a2a2;
}
I want my table to have a black border and inside, the line are supposed to be separated by a grey border. However the bottom border of the table is overridden by tr and is grey instead of black.
How can I manage to give the priority to the table border against the tr border?
Move your bottom border to the top for the tr, and set the first tr to have no border:
table{
border: 1px solid black;
border-collapse: collapse;
}
tr{
border-top: 1px solid #a2a2a2;
}
tr:first-child{
border:none;
}
jsFiddle to demonstrate it working (with slightly modified border colours and sizes to help them show up better in the demo)
Note that this solution involves slightly more CSS code than other valid solutions, but has the advantage of better browser compatibility. (:first-child is CSS2, whereas :last-child is CSS3)
[EDIT]
As per OP's comment below: To prevent the cell borders bleeding into the table border, we need to do the following:
Remove the border-collapse:collapse. This is what is making the borders combine together causing the bleeding effect.
Put the inner borders on the cells (td) rather than the rows (tr). This is necessary because without border-collapse, we can't have borders on the tr.
Add border-spacing:0 to the table. This closes up the gaps between the td elements, which would show up now because the border is on them rather than the tr.
Here's the finished code:
table{
border: 4px solid blue;
border-spacing:0;
}
td{
border-top: 4px solid red;
}
tr:first-child>td{
border:none;
}
And here's an updated version of the fiddle: http://jsfiddle.net/T5TGN/2/
use :not(:last-child)
table{
border: 1px solid black;
border-collapse: collapse;
}
tr:not(:last-child){
border-bottom: 1px solid #a2a2a2;
}
Please see this: http://jsfiddle.net/JSWorld/QmuA9/1/
Update the table css like the following
table, tr:last-child
{
border: 1px solid black;
border-collapse: collapse;
}
You can check the Demo
try adding padding-bottom to the tr:
tr{
border-bottom: 1px solid #a2a2a2;
padding-bottom: 1px;
}
I have the following CSS for my table
#currency_table
{
th { background-color: red; width: 119px; height: 45px;border-right: 1px solid #cfcfcf; border-left: 1px solid #ededed; }
th:first-of-type { width: 131px; }
th:last-of-type { width:45px;}
}
problem is that the border-right and border-left fall on top of each other so I do not see two border lines, but rather just one! I made sure that the width is large enough so that it is not a size issue.
What is wrong here?!
See border-collapse and border-spacing: http://www.w3.org/TR/CSS2/tables.html#borders. If that doesn't help, you may want to post your actual HTML.
I have a grid control and I'm setting a style for it.
In the border of cells, I want one pixel around each cell, but it appears two pixel because one from the left and one from the right.
The CSS:
.RadGrid_MyCustomSkin .rgRow td, .RadGrid_MyCustomSkin .rgAltRow td
{
border: 1px solid #F0D88C;
}
Any help !!
Use the border-collapse property.
give to td and table like this
table, td
{
border-color: #F0D88C;
border-style: solid;
}
table
{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
}
td
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
}
You can set a border for one side only, maybe this will point you in the right direction :)
.RadGrid_MyCustomSkin .rgRow td, .RadGrid_MyCustomSkin .rgAltRow td
{
border-left/*or -right*/: 1px solid #F0D88C;
}