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;
}
Related
I'm simply trying to put a border-radius around my table rows. I'm currently using jQuery Mobiles as the framework. Here is the code I'm using:
.ui-table tr {
border: 5px solid rgb(51,51,51);
border-radius: 0.5em;
}
Now when I make it td it makes my columns have rounded edges. But when I make it tr for some reason the style doesn't take effect. I'm really not sure why
for border to the table and tr here is the code just put into css file it will definitely work
table
{
border-collapse:collapse;
}
tr{
border:1px solid #CCCCCC;
}
table, td, th
{
border:1px solid #CCCCCC;
}
To display the borders on tr tag you should use table{border-collapse: collapse;} and to display the radius you could use display: block; to tr tag.
demo
try something like this
.ui-table tr {
border: 5px solid rgb(51,51,51);
border-radius: 0.5em;
display:block;
}
You need to point it to td
.ui-table tr td
Fiddle
EDIT3:
http://jsfiddle.net/ZgTHa/
Basically I have a table with an 1px solid grey border containing a radio button in each row. I apply an 1px red border on the row which is selected via the radio button. The color doesn't change. But if I set the red border to 2px, it changes.
I think this has to do with some priority issues, meaning that if both borders are 1px and both are solid, the td applies, if the td border is dotted, then the solid one applies for the chosen row. same situation if the selected row has a larger border width then the td.
I think this is just how it is in css (I might be wrong and missing something here) but I was wondering how one can work around this issue with relative ease (I could set a background image and put no borders and such, but that seems drastic)
edit (an example of what I'm trying to say):
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-collapse
if you add a "red-border" class on one of the tr like so:
<tr class="red-border">
and specify the red-border class style like so:
.red-border {
1px solid red;
}
it doesn't apply. But if you add:
.red-border {
2px solid red;
}
it does apply. same goes if you set the td border to dotted:
table, td, th
{
border:1px dotted black;
}
and keep the red border as 1px solid red, it does apply.
ill just work around it with styling the tds with specific classes which get added on the click event. I'm just curious if this is how its intended to work or am I missing something?
edit2:
i have applied the styles like so:
.red-border {
background-color: #fbfafa !important;
color: #571c20;
.first {
border-left: 1px solid #571c20 !important;
border-top: 1px solid #571c20 !important;
border-bottom: 1px solid #571c20 !important;
}
.second {
border-top: 1px solid #571c20 !important;
border-bottom: 1px solid #571c20 !important;
}
.third {
border-top: 1px solid #571c20 !important;
border-bottom: 1px solid #571c20 !important;
}
.fourth {
border-top: 1px solid #571c20 !important;
border-bottom: 1px solid #571c20 !important;
border-right: 1px solid #571c20 !important;
}
}
it still doesn't apply sometimes. It applies well for the first row, on the second row the top border doesn't apply, same for the third row. On another table the right border doesn't apply.
Not all styles will work for tr elements, like border for instance
tr
You can however easily style the table element or the td elements.
If you want a border add it to the tds.
Example:
http://jsbin.com/avihuc/1/edit
td {
border:solid black 1px;
}
If you want higher "priority" (its actually called specifity)
use something like this:
table tr td {
}
wins over
tr td {}
As a rule of thumb for specifity,
ID selecotrs are worth 100 times more than elements selectors. Classes are worth 10 times more than element selectors.
!important is super specific and can be used as a last resort.
seems i have found the anwser:
.red-border {
border: 1px double red;
}
im guessing the double style resolves the conflict between the tr and td borders.
There is another way to accomplish what you want. Instead of setting style for tr you can set styles for tr's children elements — td's. Since you've got classes for the first td and the last one, you don't even have to use pseudo-classes for that. For example left border looks like that:
tr.red-border td.first {
border-left: 1px solid red;
}
Here is the complete example: http://jsfiddle.net/htn1cjoq/. I didn't change your html, only the css part. Hope it helps.
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.
Codes as below. I'm so puzzled of this problem.
table td{
padding:10px;
background:#415DA1;
border-top:solid 10px #F00;
border-right:solid 10px #CCC;
border-bottom:solid 10px #F00;
border-left:solid 10px #CCC;
}
<table>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
The apperance between Firefox and Chrome has some differences, I'm not sure if it's coused by the differences of different brwosers. Is there any way to fix it by CSS?
Example: http://jsfiddle.net/AndyE/B2fjn/
This is just differing border drawing implementations. You'll notice that there's a difference in IE and Opera too:
I didn't test Safari, but I'd expect it to look the same as Chrome since they use the same rendering engine.
The only way that I can think of to get a consistent border across browsers is to set border-collapse to separate on the <table> element:
table {
border-collapse: separate;
}
This, unfortunately, means you have a new problem to solve — there will now be 2x 10px borders between each cell. You can work around this by altering your markup or adding extra CSS rules. For instance, I changed the CSS to the following:
table {
border-collapse: separate;
}
table td{
padding:10px;
background:#415DA1;
border-top:solid 10px #F00;
border-right:solid 5px #CCC;
border-bottom:solid 10px #F00;
border-left:solid 5px #CCC;
}
table td:first-child {
border-left-width: 10px;
}
table td:last-child {
border-right-width: 10px;
}
Demo: http://jsfiddle.net/AndyE/B2fjn/1/
This gives as good a result as you can probably expect in modern browsers, but doesn't look so great in IE 6-8. You'll need to experiment until you can get the best result possible.
the correct syntax for border (css) is : border: 1px solid #FFF;.
Now, change your CSS like this:
table tr td{
padding:10px;
background:#415DA1;
border-top:10px solid #F00;
border-right:10px solid #CCC;
border-bottom:10px solid #F00;
border-left:10px solid #CCC;
}
Some browsers have the ability to correct the css code if there's any problem ( like yours ), but some don't. So, please check if the new CSS code works or not. If it doesn't, please post the screenshots of both the browsers displaying the document. Thank You.
In my case that border problem create offset between elements in Firefox.
Solution: add this css rules to your bordered element.
div{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
...
}
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;
}