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-*
So I am writing a css page for my class, and I noticed that the style which I applied to span is not applying at all, so I went to http://validator.w3.org/ to check what I did wrong and it gave me this error message
"Line 32, Column 6: Start tag span seen in table."
This is my line 32
<span><tr><td>Mars needs moms</td><td>$150,000,000</td><td>$38,992,758</td><td>$130,503,621</td><td>2011</td></tr></span>
Here is the code for that particular style
span{background-color=:#666;font-weight:bold;color:white;}
Basically my goal is to make this table haveevery other row in the table with a background color being black with the text being white
This is the full code, incase the error made which isn't applying this style is somewhere else. there are other styles in there which don't apply to anything yet, as this is not finished yet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lowest Grossing Movies of all time</title>
<style>
span{background-color=:#666;font-weight:bold;color:white;}
p{text-decoration:underline;line-height:200%;}
h1{text-align:center;font-size:125%;}
table{border-collapse:collapse;}
th,td{padding:25px;}
</style>
</head>
<body>
<h1> Lowest Grossing Movies of All Time </h1>
<table border="1">
<tr><th>Title</th><th>Production Budget</th><th>World Wide Gross</th><th>Net Loss</th> <th>Release Year</th></tr>
<span><tr><td>Mars needs moms</td><td>$150,000,000</td><td>$38,992,758</td> <td>$130,503,621</td><td>2011</td></tr></span>
<tr><td>The 13th Warrior</td><td>$160,000,000</td><td>$61,698,899</td><td>$129,150,551</td><td>1999</td></tr>
<span><tr><td>The Lone Ranger</td><td>$225,000,000</td><td>$243,377,083</td><td>$103,311,459</td><td>2013</td></tr></span>
<tr><td>R.I.P.D.</td><td>$130,000,000</td><td>$66,627,120</td><td>$96,6865,440</td><td>2013</tr>
<span><tr><td>John Carter</td><td>$250,00,00</td><td>$282,778,100</td><td>$108,610,950</td><td>2012</td></tr></span>
</table>
</body>
</html>
The biggest problem you're facing is that there are limited elements that are valid children of the HTML table element, these are:
colgroup,
caption,
thead,
tfoot,
tbody, and
tr
So removing the span elements from the table solves that problem. Also, you'd forgotten to close one of the td elements (you closed the tr, but forgot the td); this is why readable HTML is easier to maintain (it's simply easier to see the code, and omissions, when it's indented and white-spaced).
Incidentally, using your original HTML, had you used your browser's developer tools (such as Web Inspector under Chromium, or Firebug under Mozilla), you'd have been able to inspect the DOM, which would've shown you the brower's (unpredictable and unreliable) reordering of the HTML in order to produce a valid document). For example, Web Inspector shows:
JS Fiddle 'source' for above image.
Note the three span elements moved before the table element, from the table itself.
Your corrected HTML:
<h1> Lowest Grossing Movies of All Time </h1>
<table>
<tr>
<th>Title</th>
<th>Production Budget</th>
<th>World Wide Gross</th>
<th>Net Loss</th>
<th>Release Year</th>
</tr>
<tr>
<td>Mars needs moms</td>
<td>$150,000,000</td>
<td>$38,992,758</td>
<td>$130,503,621</td>
<td>2011</td>
</tr>
<tr>
<td>The 13th Warrior</td>
<td>$160,000,000</td>
<td>$61,698,899</td>
<td>$129,150,551</td>
<td>1999</td>
</tr>
<tr>
<td>The Lone Ranger</td>
<td>$225,000,000</td>
<td>$243,377,083</td>
<td>$103,311,459</td>
<td>2013</td>
</tr>
<tr>
<td>R.I.P.D.</td>
<td>$130,000,000</td>
<td>$66,627,120</td>
<td>$96,6865,440</td>
<td>2013</td> <!-- you omitted a closing </td> tag here -->
</tr>
<tr>
<td>John Carter</td>
<td>$250,00,00</td>
<td>$282,778,100</td>
<td>$108,610,950</td>
<td>2012</td>
</tr>
</table>
Using CSS:
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
/* using ':nth-child(odd)' to style the 'td' elements
of the alternate/odd rows of the table */
tbody tr:nth-child(odd) td {
background-color: #ffa;
}
JS Fiddle demo.
References:
<table>.
:nth-child().
In most modern browsers this could be achieved with css:
tr:nth-child(even) {
background-color:#666;
font-weight:bold;
color:white;
}
No span tags required. (Remove them)
JS Fiddle: http://jsfiddle.net/uB2GR/
You've placed <span> elements between two <tr> elements. This is not valid HTML. You need to place your entire <span> inside a table cell.
<tr><td><span>Some stuff</span></td><td><span>More stuff</span></td></tr>
if you're doing this for styling purposes there's probably a better way with classes applied to the <td> elements
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.