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.
Related
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.
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.
I have a <table> of data where consecutive rows are conceptually related and need to stay together. I've group each pair of rows in a <tbody> tag. When it comes time to print the table, I want to make sure that page breaks only happen between <tbody> tags.
I've tried some variations of page-break-inside: avoid and page-break-after: auto, but can't seem to get it to work in Chrome 42 (see screenshot below)
However, it does seems to work as expected in Firefox 40 and IE 11 though. It looks like page-break-* might only apply to block level elements. Is there a good way to accomplish this in html/css?
Example code:
<!doctype html>
<html>
<head>
<style>
table {
width: 70%;
border-collapse: collapse;
}
thead {
display: table-header-group;
text-align: left;
border-bottom: 2px solid #000;
}
tbody {
page-break-inside: avoid;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Project #</th>
<th>Owner</th>
<th>% Complete</th>
</tr>
</thead>
<tbody>
<tr>
<td>HR-123</td>
<td>Arther Dent</td>
<td>42%</td>
</tr>
<tr>
<td colspan='3'>Description: Find travel guide to get me back to earth.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>RD-123</td>
<td>Frodo Baggins</td>
<td>9%</td>
</tr>
<tr>
<td colspan='3'>Description: Find a better way to get the ring to Mordor.</td>
</tr>
</tbody>
<!-- repeat tbody sections as necessary to get onto the second page -->
</table>
</body>
</html>
Here's a JSFiddle that'll give you a bit of an idea of what I'm trying to accomplish.
Edit: I considering not using a table but didn't since (i) I want my columns to line up, and (ii) I really don't want to hard-code column widths to make sure they're all the same.
Try wrapping it all in a
make that specific a block element (http://learnlayout.com/inline-block.html)
then use page-break-*
The DITA Open Toolkit automatically inflicts some inline table attributes when one publishes to HTML, including frame="border" and rules="all".
I need to override this "rules" attribute using CSS styles for cells, and while I can get the desired result in IE and Chrome, Firefox puts solid black gridlines in the table and refuses to budge on the matter.
Obviously I can't edit the HTML, company policy is to not edit the XSLT, so how can I remove these gridlines using CSS alone?
I've tried various cunning combinations of border-xxxxxx styles and given them !important declarations to no effect.
The HTML says...
<table cellpadding="4" cellspacing="0" frame="border" border="1" rules="all">
<thead>
<tr>
<th class="cellrowborder">Type </th>
<th class="cellrowborder">Comment </th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder">Caution </td>
<td class="cellrowborder">Think twice. </td>
</tr>
<tr>
<td class="cellrowborder">Attention </td>
<td class="cellrowborder">Be careful. </td>
</tr>
<tr>
<td class="cellrowborder">Danger </td>
<td class="cellrowborder" >Be scared. Be very scared. </td>
</tr>
</tbody>
</table>
The CSS says
table {border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
font-size: 9pt;
margin-top: 1em;
margin-bottom: 1em;
padding: 4px;}
tr {border: none;}
.cellrowborder {border: none;}
So while it looks as I'd expect in IE, it doesn't in Firefox UNLESS I remove those frame/border/rules attributes in the HTML. Which I can't in production.
Use jQuery's remove attribute on document load to remove the old attributes all together.
api.jquery.com/removeAttr
I've had a quick play with <table frame="border" rules="all">. The key seems to be to override it with another border, for example:
table {
border: none;
border-collapse: collapse;
}
td {
border: 1px solid silver;
}
It's not ideal if you need to remove the border altogether, but I guess you could match the border-color to the page background?
border-color seems to apply.
Maybe using FireBug Inspect Element can help you detect the CSS property and allow you to target it in Firefox (instructions here).
Can you post an example of the code?
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.