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.
Related
I would like the md-divider underline under each of my table rows. Especially since md-divider has the nice ng=if"!$last". But it seems like the ng-repeat has to go on the tr element so the divider couldn't go after the table row.
<tr ng-repeat="user in users" class="row">
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
</tr>
- I would want a divider here.
Note: I also tried just using a border and it doesnt even show up.
You can achieve it with css by giving border to <td> instead of <tr>
td{
border-bottom:1px solid #000; // change color and size accordingly
}
css border doesn't works in <tr> but you can apply it on <td> because both <td> in <tr> will have the same height so it will not create any problem.
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-*
I am trying to style a simple table:
<table>
<tr>
<th>Title1</th>
<th>Title2</th>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
I want the table to have horizontal borders at the top and bottom, and the heading to have a horizontal border at the bottom:
This seems to work fine when I do not have a containing div identified by ID:
JS Fiddle 1 (working)
Once I put it in a containing div it is failing:
JS Fiddle 2 (not working)
Using CSS I can achieve this using firebug. Somehow trying to put it in the style sheet is causing it to fail (the th borders are not showing up). Any ideas?
EDIT
A typo I had was found, but as my original was not working, I have updated the above to show the error I am running into. The problem is somehow with adding a containing div and identifying the table by its ID.
Updated fiddle:
http://jsfiddle.net/XPyzM/243/
table {
border-top: 2px solid black;
border-bottom: 2px solid black;
}
was containing a bracket extra
UPdated for the new issue:
http://jsfiddle.net/XPyzM/247/
Check it out if you have any problems..
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.