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.
Related
I want to apply left border on my th element in table. The problem is, when I put border CSS style there is an empty "space" after line (tr) - see image.
<table>
<tr>
<th>
....
<th>
</tr>
<tr>
<th>
....
<th>
</tr>
</table>
I am using border-left: 1px solid #2185d0; for all th elements
But I want full line like this:
How can I do this?
Perhaps add this to your css?
table {
border-collapse: collapse;
}
I think the problem is in the CSS styles you are attributing to the table. It would really help if you could provide code snippits for that (specifically).
What I suspect is that you have either margin or padding settings that are preventing the table cells from touching eachother, thus producing a space between the border lines.
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 question. I have a table like the one below
<table>
<tbody>
<tr class="unread"><td>Message</td></tr>
<tr class="unread"><td>Message</td></tr>
<tr class="unread"><td>Message</td></tr>
<tr class="read"><td>Message</td></tr>
<tr class="read"><td>Message</td></tr>
<tr class="read"><td>Message</td></tr>
<tr class="read"><td>Message</td></tr>
</tbody>
</table>
I am trying to add a border-bottom on the last .unread with tr.unread:last-of-type but doesn't seem to work.
I am seeking for a pure CSS solution, as the number of unread/read rows are changed dynamically and have no access to code.
Perhaps look at it a different way: you could get the same result by putting a top border on the first .read row:
.unread + .read td {border-top: 1px solid red;}
Demo
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..
I'm trying to add borders around specific table rows which change it's colors when the mouse enters the row. However, I don't see a border at all unless using border-collapse:collapse; but I have to avoid border-collapse, since in some cases the border is visible left, right and at bottom but not on top (probably because I cannot have padding/margin when using border-collapse).
Is there a way to achieve this?
<table style="border-collapse:collapse;">
<tr style="border:1px solid black">
<td>Cell_1</td>
<td>Cell_2</td>
</tr>
</table>
You can try using outline instead.
tr:hover {
outline: 1px solid #999;
}
Have a look: http://jsfiddle.net/dWWkx/3/
As far as I know you can't put a border on a table row, but you can on the table cell (<td>).
With some creative border-right and border-left, with a cell-spacing of 0, you should be able to achieve the appearance of a border around the whole row.
i had exactly the same problem and found this workaround:
<tr class="border_bottom">
CSS:
tr.border_bottom td {
border:1pt solid black;
}
Found it here and adjusted it: Add border-bottom to table row <tr>
try this:
<table style="">
<tr style="display:block;border:1px solid black">
<td>Cell_1</td>
<td>Cell_2</td>
</tr>
<tr style="display:block;border:1px solid black">
<td>Cell_1</td>
<td>Cell_2</td>
</tr>
</table>