I am building a printable table. And it works well on chrome. But on firefox
, it doesn't show the table borders.
<body>
<table>
<tbody>
<tr>
<td>One</td><td>One</td><td>One</td>
</tr>
<tr>
<td>One</td><td>One</td><td>One</td>
</tr>
<tr>
<td>One</td><td>One</td><td>One</td>
</tr>
</tbody>
</table>
<style>
table,tr,td{
border: 1px solid;
border-collapse: collapse;
}
</style>
</body>
It seems they are not visible on the preview usually when the border is too thin like 1px. But the borders will actually be visible when printed.
This is probably image resampling problem on firefox preview. since they display well on chrome.
Related
When I copy and paste a table styled with CSS from a browser to a word processor I get very different results: Firefox neglects CSS styles, Chrome copies only the content of the table, and Safari works only with Pages. Is there a way to copy paste cross browser, ideally with CSS?
#css {
border-collapse: collapse;
}
#css td {
border: 1px solid;
}
<table id="css">
<tbody>
<tr>
<td>Test1</td>
<td>Test2</td>
</tr>
</tbody>
</table>
https://codepen.io/anon/pen/ZrVXdG
Can somebody help me? I'm trying to remove/hide border between table cells, but fail. Here's CSS I've tried to do this:
table, td, tr{
border-style: hidden;
background-color: white;
border-collapse:collapse;
border-spacing: 0px;
}
and here's my HTML:
<table>
<tbody>
<tr>
<td>HI</td>
<td>HI</td>
</tr>
<tr>
<td>HI</td>
<td>HI</td>
</tr>
</tbody>
</table>
and I'm still getting this:
Try using border: none
Also, right click on one of the cells and choose "Inspect Element" (in Firefox). Then on the right side of the new window (under Rules) you can see from where the border is coming (CSS).
Also be sure that you don't have any margin between the elements so that a possible background color from an element behind it could shine through. But that should be not really possible when using a table.
When I put a div inside a cell, the border of the cell is not properly shown in IExplorer: it is thinner for the cell that has a div inside.
Here's an example:
<html>
<head>
<style>
table { border-collapse: collapse; }
table, td, th { border: 2px solid black; }
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<th><div style="float:left;width:100%;height:100%;background-color:blue;">Peter</div></th>
<th>Griffin</th>
</tr>
<tr>
<th>Lois</th>
<th>Griffin</th>
</tr>
</table>
</body>
</html>
I've tried doing a "relative" positioning for the div and doing a "cellspacing=0" for the table and none of them work. The cell borders are properly shown in Chrome and Safari, but I don't know why IExplorer keeps doing making some of the borders around the filled cell thinner.
I've found a lot of closely related topics, but none covered this (or I didn't know how to apply it to this particular case). So I come to you in desperation.
Do you know any way to solve it?
Thanks in advance.
PS: I'm talking about IExplorer 11, I don't know what happens in earlier versions.
I'm having a problem that appears to only occur in Chrome and nowhere else. I have a table, which has a style applied to it on hover. In other browsers, the style is applied when hovering over any part of the row. However, in chrome, at the edge of each td, the style is no longer applied. If I "inspect element" on this small 1px wide area between cells, the elements pane shows that Chrome thinks I am within the table, but not within the row itself. Here is some code which produces this effect:
CSS:
table.tablesorter tbody tr:hover {
background: #8dbdd8;
cursor: pointer;
}
table {
border-collapse: collapse;
border-spacing: 0px;
border: none;
}
HTML:
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bach</td>
<td>42526</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Doe</td>
<td>243155</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
<tr>
<td>Conway</td>
<td>35263</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
</tbody>
</table>
Anybody seen this before / know a way around it?
If it helps, I am using Chrome 13.0.782.220.
Live demo: http://jsfiddle.net/yNPtU/
Interestingly this is not caused by the border. If you set a border width to 10px, there is still only 1px in-between the cells that causes this.
I tried setting the position of the tds which seemed to work. Here is a demo: http://jsfiddle.net/lnrb0b/6harr/
Note: I've added the padding in to keep the size consistent
As mentioned in this question, this will solve it:
td {
padding: 2px 5px;
position:relative;
}
And the JsFiddle.
The table has cellpadding and cellspacing by default. You will need to add:
<table cellspacing="0" cellpadding="0">
Give border-spacing:-1px in css.
This looks fine in safari, but not in firefox 3.0.11
Firefox: http://i31.tinypic.com/11s1d00.png
Safari: http://i30.tinypic.com/fnxu2v.png
HTML for the table:
<table class="placement-testing-schedule">
<tr>
<th>Day</th>
<th>Date</th>
<th>Check-in Begins (Entrance of College Center)</th>
<th>Test Begins</th>
<th>Registration Begins</th>
<th>Seating Availability</th>
</tr>
<tr>
<td>Tue</td>
<td>8/18/09</td>
<td>10:45 AM</td>
<td>10:00 AM</td>
<td>12:30 PM</td>
<td><span class="open">Open</span></td>
</tr>
<tr>
<td>Wed</td>
<td>8/26/09</td>
<td>10:45 AM</td>
<td>10:00 AM</td>
<td>12:30 PM</td>
<td><span class="open">Open</span></td>
</tr>
</table>
The css for the table:
/* ---------- Placement Testing ----------- */
.content-body .col-middle table.placement-testing-schedule {
margin-bottom:10px;
border-spacing:10px;
}
table { border-collapse: collapse; }
.content-body .col-middle table.placement-testing-schedule td, th {
border:1px solid #055830;
background-color:#ffc;
padding:7px;
}
.content-body .col-middle table.placement-testing-schedule th {
background-color:#fdbe2f;
}
Anyone know why it is being cut off in firefox? Heck, it even looks correct in IE6 & IE7.
Try adding the border (same one that's on the td,th elements) to the table itself.
Is it just a standard table? Might help to post the HTML as well, so we know exactly what you're working with.
Are you using CSS border-collapse on the table element? Firefox renders that property differently than the other browsers.
Remove the border-collapse and use cellspacing=0 instead.
<table style="border: 1px solid #000;" 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.
This is a bug in Firefox. box-sizing: content-box is not applied to table cells, it currently only applies border-box which includes the border in the height/width, it is non-standard and needs to be fixed.
As it is now, it ignores the border and kind of adds it as a purely visual and not "physical" border. If you want, add a div above the table with a fixed height/width/border and see as firefox renders that div's border above the table border, overlapping it as if it wasn't even there. Now float the div to the left, now the left table border is overlapped by the div's border.
Unfortunately, the only way I have found to reliably make sure the border is visible is to add a margin: 0 1px 1em; to the table.
See Firefox's box-sizing spec and the bug that is causing this: bug 243412.
I had a similar problem (FF 3.6). But the solution in my case was just to add borders to the th elements in the header row (or remove that row entirely), which didn't have the border set. I see that in your case you already have those header row borders though.