Is there any workaround for the following "1 pixel to the left" bug?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>
It looks like this:
Is there any pure CSS solution to this?
Edit
I was bit unclear about my table so here it is again:
With border-collapse:
With cellspacing="0" and without border-collapse as suggested:
So now the borders inside my table are doubled, but I want 1px border across my table.
When I remove 1px border from table I end with:
Borders are still doubled inside my table.
I could set only right and bottom border for every TD, TH and left border for every first-child in TR to achieve what I want, but I think there's a simpler way?
For those who prefer to keep presentation out of the markup, or who don't have access to the markup, here is a purely CSS solution. Just ran into this problem myself, and tested this solution in FF3.5, IE6, IE7, IE8, Safari 4, Opera 10, and Google Chrome.
table { border-spacing: 0; *border-collapse: collapse; }
This sets the table to use border-spacing in all browsers (including the culprit, Firefox). Then it uses the CSS star hack to present the border-collapse rule only to IE, which doesn't properly apply border-spacing (you could also include a separate stylesheet for IE with conditional comments if you don't like hacks).
If you prefer using cell-spacing, by all means use it. This is simply offered as an alternative method using CSS.
Remove the border-collapse and use cellspacing=0 instead.
<table style="border: 15px solid green; width: 100%" cellspacing="0">
It happens because when you set border-collapse:collapse, Firefox 2.0 puts the border to the outside of the tr. The other browsers put it on the inside.
Set your border widths to 10px in your code to see what is really happening.
edit after OP edit
You can use the old table "border" trick. Set the background color on the table. Set the td and th color to white. User cellspacing = 1;
table {background-color: green;width:100%;}
td, th{background-color:white;}
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
This issue no longer exists. In Firefox 47.0.1, the following CSS doesn't exhibit the one pixel problem:
table {
border-collapse: collapse;
}
th, td {
border: solid 1px #000;
}
We can also get clean one-pixel borders to work without relying on a working implementation of border-collapse, like this:
table {
border: solid 1px #000;
border-width: 0 1px 1px 0;
border-spacing: 0;
}
th, td {
border: solid 1px #000;
border-width: 1px 0 0 1px;
}
You see what it's doing? The trick is that we put only a top and left border on the cells:
+------+------
| cell | cell
+------+------
| cell | cell
This leaves the table without a right and bottom edge: we style those onto table
+------+------- | +-------+------+
| cell | cell | | cell | cell |
+------+------- + | = +-------+------+
| cell | cell | | cell | cell |
| | ---------+ +-------+------+
The border-spacing: 0 is essential otherwise these lines will not connect.
Best CSS only solution:
Add
td {
background-clip: padding-box
}
More information: https://developer.mozilla.org/en-US/docs/CSS/background-clip
Thanks to #medoingthings
table { border-spacing: 0; border-collapse: collapse; } /* works in FF 3.5 */
table { border-spacing: 0; *border-collapse: collapse; }
wasn't working for me in FF 31. Since i've different colors for thead and tbody cells the table background-color trick wasn't working, too. The only solution was the following:
table {
border-collapse: separate;
}
table tbody td {
border: 1px solid #000;
border-top: none;
border-left: none;
&:first-child {
border-left: 1px solid #000;
}
}
table thead th {
border-bottom: 1px solid #ff0000;
&:first-child {
border-left: 1px solid #ff0000;
}
&:last-child {
border-right: 1px solid #ff0000;
}
}
I was bitten by this today. The offered work-arounds didn't work for me, so I found my own:
table { border: 1px solid transparent; border-collapse: collapse; }
This way, you get collapsed borders, no double borders, and everything within the boundaries you desire, without browser-specific rules. No drawbacks.
I don't think I've ever heard of a "1px to the left bug," you should upload your code someplace so we can check it and make sure it's not an "I missed something somewhere" bug :) I would also suggest running through your markup with Firebug to determine if there is anything else going awry.
I ran into this problem - but in my case it had to do with the table being nested within a div set to overflow:hidden. I removed this and it worked.
Ran into this issue and as a work around. I used :
table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;}
table td{border:none;}
basically cheated the border by using a background color. Which thus prevented double inside borders.
My solution is as follows.
Remove border-collapse, border and border-spacing from CSS.
Add this JavaScript code:
$('table tbody tr td').css('border-right', '1px solid #a25c17');
$('table tbody tr td').css('border-bottom', '1px solid #a25c17');
$('table tbody tr td:last-child').css('border-right', 'none');
$('table').css('border-bottom', '1px solid #a25c17');
To be honest, I don't know why it works. It's jQuery magic.
I also have run into this problem the full proof solution is very simple in your asp:gridview just add
GridLines="None"
and the lines disappear in Firefox no css modification needed.
Related
IMPORTANT: This question is no longer valid. This bug was fixed in recent versions of Chrome.
I use border-spacing: 1px CSS rule to get all the cells in my TABLE to have a 1px spacing between them. However, I have to use multiple TBODY elements in my table. I get 2px between THEAD, TBODY and TFOOT elements (Chrome).
What's the easiest way to replace these 2px gaps with 1px?
Exact HTML and CSS code: http://jsfiddle.net/qQA3Z/
Note: This is a Webkit-specific bug. (Not present in Firefox, and as usual IE won't even load jsFiddle to test it.)
Unfortunately, there is no way to properly fix this. There is an open question on this very topic already. Additionally, there is an open bug report since Chrome 8 which has been confirmed to exist through Chrome 20 (and I can confirm in Chrome 25). There is also an open Webkit bug thread on this matter, which is still "NEW".
To be honest, I can't even find a workaround for this. Playing with border-spacing, margin, and even position don't seem to have an effect on this.
It would appear that there's a conflict between the border-collapse at table level and the children thead,tbody,tfoot. A possible workaround:
http://jsfiddle.net/qQA3Z/3/
body { margin: 10px; }
div {border: 1px solid #aaa; display:inline-block}
table {
background: #fff;
border-collapse: collapse;
}
td {
font-family: Tahoma;
background: #ddd;
padding: 5px 8px;
border:1px solid #fff
}
<div>
<table>
<thead>
<tr><td colspan='2'>Header</td></tr>
<tr><td>Column 1</td><td>Column 2</td></tr>
</thead>
<tbody>
<tr><td>Element</td><td>Element</td></tr>
<tr><td>Element</td><td>Element</td></tr>
</tbody>
<tfoot>
<tr><td colspan='2'>Footer</td></tr>
</tfoot>
</table>
</div>
This solves it for me:
table { border-collapse: collapse!important;}
What personally solved it for me was changing the line-height to 0
line-height:0;
border-spacing: 0
Please forgive my all-encompassing ignorance, but I just can't get my table to look right in my webform.
I declare a table:
<table>
</table>
and it has no border. There is an attribute for border, as such:
<table border="1">
</table>
but asp.net tells me that the border attribute is 'obsolete'.
I try to add it in CSS...
.table{ border: 1px solid black; border-collapse: collapse; }
...but this just puts a border around the whole table, not the individual cells.
All I want is a normal looking table with lines around each cell. What is the proper way to do this?
Use this:
table, table th, table td { border: 1px solid black; border-collapse: collapse; }
(need to apply the border to the table-cells too)
The code above won't work as...
.table{ border: 1px solid black; border-collapse: collapse; }
is looking for a class of "table" and not a table element. Either update the table class to "table"...
<table class="table">
...or change your CSS to find the table element itself.
table{ border: 1px solid black; border-collapse: collapse; }
You will also need to style th and td elements to have the border.
I would really appreciate some help.
I have a problem with html markup in asp.net, so, have to make workaround. For Firefox and Opera, everything is perfect, but Chrome on Safari still have one issue.
I want to make last <th> tag unbordered. Header <tr> line has "bordered" css class. Here is css part:
.bordered th
{
border: 1px solid black;
}
.bordered th:last-child
{
border: 0px none white;
border-bottom: 0px none white;
}
HTML markup:
`<table class="bordered" cellspacing="0" border="0" id="ctl00_body_gvTimeTable" style="border-collapse:collapse;">
<tr style="border-width:0px;">
<th scope="col">One</th>
<th scope="col">Two</th>
<th scope="col">Three</th>
<th scope="col"> </th>
</tr>`
But still last <th> stays underlined. What's the problem?
I checked this out in jsFiddle. I wasn't able to see any problem in Chrome (version 15) nor Safari (version 5).
I made a slight adjustment to your CSS (changed your border values to zero - as suggested by Stack Overflow):
.bordered th { border: 1px solid black; }
.bordered th:last-child { border: 0; border-bottom: 0; }
Something to note, :last-child is a CSS3 selector. That means it will not work in IE8 or below (unless you are using Selectivizr or similar).
:last-child will select the last child element of the targeted parent (in this case, .bordered th). You'll need to use something like th:last-of-type.
Try throwing it an !important this will override any previously given stylings, aswell as stylings that would override it later on.
.bordered th
{
border: 1px solid black;
}
.bordered th:last-child
{
border: 0 !important;
border-bottom: 0 !important;
}
I want to put a line above some field in a table, to indicate that it is a sum of the above values. However, the table already has borders by default.
Here is an example: I have a table with borders collapsed. I set the border-bottom on one field, and the border-top on the field below it. Both of these specify the same border. The CSS for the top one is used. Is there a way to use the bottom one?
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; }
td.first { border-bottom: solid red 1px; }
td.second { border-top: solid gold 1px; }
</style>
<body>
<table>
<tr><td class="first">Hello</td></tr>
<tr><td class="second">World</td></tr>
</table>
</body>
</html>
This shows two cells with a red line between them. Is there way to get a gold line?
This is a defined behavior of border-collapse. Page 357 of the O'Reilly CSS Definitive Guide 3rd Edition says:
if collapsing borders have the same style and width, but differ in color, then ... from most to least preferred: cell, row, row group, column, column group, table.
if ... come from same type of element, such as two rows... then color is taken from borders that are the topmost and the leftmost.
So the topmost, which is red, wins out.
One way to override this may be to use cell for the color to win over the color for the row.
example: http://jsfiddle.net/Chapm/
The rules that have higher precedence than this "same color rule is"
wider border wins over narrower ones
and after that,
double wins over solid, then dashed, dotted, ridge, outset, groove, inset
You can use 2px for the gold for it to win over, and I tried in Chrome to use 1px but double, and it appears as 1px solid and it will win over the red as well. Although if you want to use this method, then it may be best to make sure the browsers you support behave the same using this technique.
http://jsfiddle.net/Chapm/2/
Just change border-collapse to separate and set border-spacing to zero.
Note: IE8 supports the border-spacing property only if a !DOCTYPE is specified.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table {
border-collapse: separate;
border-spacing: 0px;
}
td.first {
border-bottom: solid red 1px;
}
td.second {
border-top: solid gold 1px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="first">Hello</td>
</tr>
<tr>
<td class="second">World</td>
</tr>
</table>
</body>
</html>
Tested on win7 with:
Chrome 16,
IE 9,
FF 9,
Safari 5.0.5.
Remove border-collapse: collapse; from your code, instead set cellspacing attribute to 0 for your table.
I know it's an old question but just came across the issue and I solved it like this
table {
border-collapse: collapse;
}
td.first {
border-bottom: solid red 1px;
}
td.second {
border-top: solid gold 1px;
position: relative;
}
tr:not(:first-child) td.second::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 1px;
background-color: gold;
}
<table width="280">
<tr><td class="first">Hello</td></tr>
<tr><td class="second">World</td></tr>
<tr><td class="second">World</td></tr>
<tr><td class="second">World</td></tr>
</table>
Just remove the td.first { border-bottom: solid red 1px; } from your style.
Or change red to gold in the td.first selector.
Example here.
I have a table with the following CSS rules applied:
table { border-collapse: collapse; }
td { border: 2px solid Gray; }
I want certain cells to have a red border, instead.
td.special { border: 2px solid Red; }
This doesn't work as I'd expect. In FireFox 3 and IE8 it looks like this:
(source: control-v.net)
In IE7 Compatibility mode (Running in IE8) it looks like this:
(source: control-v.net)
I want all four sides of the <td> to be red. How can I do this? A test case can be found here.
There's another post on the site I read a while ago that gracefully solves this problem, but I couldn't find it. Anyway, the approach was to make the border-style double instead of solid. This works because double has a higher priority than solid. On 1px or 2px borders, the gap between the double lines doesn't appear because the lines overlap.
table { border-collapse: collapse; }
td { border: 2px solid Gray; }
td.special { border: 2px double Red; }
<table>
<tr><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td class="special">a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td></tr>
</table>
Won't be possible using border-collapse. You could work around the problem somewhat though, for example by doing this:
<td class="special"><div>Two</div></td>
Then applying a style like this:
.special div {
border: 2px solid #f00;
margin: -2px;
}
What (hopefully) will happen is the div inside the td will expand outward by 2 pixels and cover the black border with a red border.
Using pseudo elements:
You can use a pseudo element to achieve this.
Just absolutely position the pseudo element relative to the parent td element. Make the pseudo element fill the entire dimensions of the parent element, and then add the border to it.
Example Here
table {
border-collapse: collapse;
}
table td {
position: relative;
border: 1px solid #000;
padding: 2px;
}
table td.selected:after {
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
border: 2px solid red;
}
<table>
<tr>
<td>One</td>
<td>One</td>
<td>One</td>
</tr>
<tr>
<td>Two</td>
<td class="selected">Two</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Three</td>
<td>Three</td>
</tr>
</table>
border-collapse means the td's don't actually have some of their borders. You'll have to find some other way to do it. Giving the table a background and taking away all borders but leaving the td margins gives a nice border. Then setting a border would give an internal border, I believe. Would that work?