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;
}
Related
I applied the below table border to all of the tables on my site
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th, td{
border: 1px solid #999;
How do I do no border on some of the tables while keeping the border on the others?
You can target elements with a specific class or id to style:
#tableOne {
border: none;
}
.borderlessTable {
border: none;
}
Alternatively you could do it the other way around and add the border to tables with a specific class/id.
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.
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 want to use CSS to set a color of the outer border of the table ...
Then the inner cells would have different border color ...
I created something like this :
table {
border-collapse:collapse;
border: 1px solid black;
}
table td {
border: 1px solid red;
}
Problem is, the table's color change and become red as you can see here : http://jsfiddle.net/JaF5h/
If the border width of the table is increased to be 2px it will work : http://jsfiddle.net/rYCrp/
I've been dealing with CSS and cross browsers issues for so long ... This is the first time I face something like that and I am totally stuck ... No idea what to do!
Any one knows how to get that fixed with border-width:1px ?
I would acheive this by using adjacent selectors, like so:
table {
border: 1px solid #000;
}
tr {
border-top: 1px solid #000;
}
tr + tr {
border-top: 1px solid red;
}
td {
border-left: 1px solid #000;
}
td + td {
border-left: 1px solid red;
}
It's a little bit repetitive, but it acheives the effect you're after by setting the top and left borders of the first row and column respectively, then overwriting the 'internal' rows and cells with red.
This won't of course work in IE6 as it doesn't understand the adjacent selectors.
http://jsfiddle.net/JaF5h/36/
Try this:
tbody { display:block; margin: -1px; }
The previous answers didn't fully resolve this for me. The accepted answer allows the internal borders to overlap the outer table border. After some experimentation I came up with the following solution.
By setting the table collapse style to separate the internal borders do not overlap the outer. From there the extra and doubled borders are eliminated.
HTML:
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
CSS
table {
border: 1px solid black;
border-collapse: separate;
border-spacing: 0;
}
table td, table th {
border: 1px solid red;
}
table tr td {
border-right: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td{
border-top: 0;
}
https://jsfiddle.net/o5ar81xg/
Create a div surrounding your table. Set the div border color for the outside of your table. DO NOT border-collapse your table. Instead, let your cells separate to show the (inner borders) background color of the div beneath. Then set the background cells to the background color of your choice.
HTML:
<div id="tableDiv">
<table id="studentInformationTable">
<!-- Add your rows, headers, and cells here -->
</table>
</div>
CSS:
#tableDiv {
margin-left: 40px;
margin-right: 40px;
border: 2px solid brown;
background-color: white;
}
table {
position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
border-color: brown;
}
td, th {
background-color: #e7e1d3;
padding: 10px 25px 10px 25px;
margin: 0px;
}
Try the following it worked for me:
table {
border-collapse: collapse;
border: solid #000;
}
table td {
border: 1px solid red;
}