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;
...
}
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
i have a table on this page with the following css (each td has the class box)
.box{
border: 3px outset #959595;
width:25px;
height: 25px;
background-color: #dddddd;
cursor: pointer;
}
table{
border-collapse: collapse;
border-spacing: 0px;
border: 4px inset #444;
}
i get what i want in firefox
but in any other browser it doesnt seem to be working as i want it to
From MDN's documentation on border-style (re: outset):
Displays a border that makes the box appear in 3D, embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.
Your table has border-collapse: collapse;, so it's actually rendering as border-style: ridge in Firefox.
Either set border-collapse: separate; or set border-style: ridge; to normalize the style across browsers that may not be changing outset to ridge.
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;
}
Picked up a friend's CSS project to help out. I'm not an expert in CSS, here it goes:
I can't seem to find a direct answer. I am creating a table and I want 2 types of TH class that uses differnet background color in a table.
(also i might need some help on the DIV tag)
The css I'm using is like this can someone tell me what am I doing wrong?
<div class="one"><div class="two">
<table>
<TR><TH> one color </TH></TR>
<TR><TH class="color">differnet color </TH></TR>
</table></div></div>
.one .two th {
padding: 5px 10px;
border: 1px solid #d9d9d9;
background: #000000;
}
.one .two th .color{
padding: 5px 10px;
border: 1px solid #d9d9d9;
background: #ffffff;
}
Remove the space between th and .color
Otherwise you're looking for a .color descendant element inside the th, not for the class on the th itself.
No sure why the borders are not displaying correctly. I tried:
/* ------ global ------ */
body {
margin: 0 auto;
padding:0 0;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
color:#000;
}
/* ------ Content Wrapper ------ */
#wrapper {
margin: 0 auto;
width:760px;
text-align:left;
}
#content table {
font-size:.8em;
border-collapse:collapse;
text-align:left;
width:100%;
}
#content table td {
border:solid 1px black;
}
Do I need to list all the CSS border properties to get the borders on the whole table, like this:
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
or more ......
I haven't done this yet, but I have had to do this in the past with some tables to get the borders on all sides for lte IE7. It was just as a last resort since I didn't know what else to do.
Consider the following jsFiddle, which works correctly in IE7 by showing a 1 pixel solid black border on table cells.
I didn't change any of your code, but added a rule to include borders on table header cells table th as well as table data cells table td.
HTML:
<div id="content">
<table>
<tr>
<th scope="col">Column</th>
<th scope="col">Column</th>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
</div>
CSS:
#content table {
font-size: 0.8em;
border-collapse: collapse;
text-align: left;
width: 100%;
}
#content table th,
#content table td {
border: solid 1px black;
padding: 5px 10px;
}
If your table cells still aren't showing any borders, you might have one or more rules in your stylesheet that appear later — or have more CSS Specificity — that are overriding your styles.
Try using border-collapse:separate for IE7 like this:
#content table {
font-size:.8em;
border-collapse:collapse;
text-align:left;
width:100%;
*border-collapse:separate;
}
apply border-collapse: collapse to the table, it should fix it :)