I am having trouble figuring out what I'm doing wrong... I'm trying to do something that should be simple--change the border color of an entire row when the user hovers over the row.
For the table, I'm using the following CSS code:
.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
.sch tr:hover{ border-color: red; }
<table class='sch'>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
The issue is that, when you hover over the second or third row, the top bar of the border remains black, while the sides and bottom change to red. Only the top row changes to red all the way around.
I suspect that this has to do with the bottom of the previous row somehow covering up the red of the hover, but I've tried about everything--except the right answer---to fix it.
Thanks for your help!
border-collapse: collapse; is a culprit here.
It is related to the fact that the top cell bottom border is on top of the bottom cell top border. If you make top cell bottom border as none then you will see all borders properly being set to red.
Look at this interactive example in MDN to see exactly what happens
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
This appears to be tricky to implement without JavaScript.
This is a solution using jQuery:
$(".sch tr").hover(function(){
$(this).css("border-color", "red");
$(this).prev().css("border-bottom-width", "0");
}, function(){
$(this).css("border-color", "#000000");
$(this).prev().css("border-bottom-width", "2px");
});
.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='sch'>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
If you want to use CSS and HTML only, you can use such not the best but working solution.
CSS-file:
.sch {
width:97%;
margin: 0 auto;
margin-top:30px;
border-collapse: collapse;
}
tr {
border: 2px solid #000000;
}
.sch tr:hover {
border-color: red;
border-bottom-width: 2px;
}
tr:nth-child(3) {
border-bottom-width: 0;
}
tr:nth-last-child(1) {
border-bottom-width: 2px;
}
HTML-file:
<table class='sch'>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td>
</tr>
</table>
Related
I have a table wherein I need to put a border around a given row or rows with spacing between them.
I seem to be able to do one or the other.
I know I can use
table { border-collapse: separate; border-spacing: 1em 0.5em; }
To get my spacing, but then the border won't show up with something like
tr.bordered { border: 1px solid blue; }
If I set border-collapse: collapse, the blue border shows. But then no spacing.
Am I missing something here?
EDIT: JS FIDDLE here
You can see, if you use "collapse", the border works but there is no space.
If you use "separate" you get spacing but no border.
Duplicate question here: Style row or column rather than cells when border-collapse: separate
The recommendation is to use colspan to simulate a table row, and add a border to the table inside of the colspan.
I guess what you want is to put spaces between the borders of the cell and its data? If so, you can use the property padding in td. ex:
td {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 10px;
}
You can have an inner table which is bordered:
<table>
<tr><td colspan="3">
<table class="bordered">
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
</table>
</td></tr>
<tr>
<td>lorem</td>
<td>ipsum</td>
<td>dolor</td>
</tr>
</table>
Demo: http://jsfiddle.net/2nMcg/7/
If you want spacing between the table rows and add a border style to each row you can achieve this by setting only top and bottom border-spacing otherwise you cannot have a continuous line for each table row. And you need to set the border style on the td. Since border-collapse: collapse prevents to style the border on the TR element but you need it to set the top and bottom spacing between rows.
http://jsfiddle.net/6rLsL/1/
http://jsfiddle.net/6rLsL/1/show
table {
border-collapse: separate;
border-spacing: 0 0.5em;
}
td {
padding: 0.5em;
border-top: 1px solid #000;
}
you can try to draw an unblured shadow : DEMO
.bordered {
box-shadow:0 0 0 1px black;
}
:( this works in FF , but ...
so ,
we can use :first-child and :last-child to draw borders from tds,
DEMO 2
.bordered td {
border: 1px solid #000;
border-left:none;
border:right:none;
padding:1em 0.5em;
border-right:none;
}
.bordered td:first-child {
border-left:1px solid #000
}
.bordered td:last-child {
border-right:1px solid #000;
border-left:none;
}
table {
border-spacing: 0;
}
I've made a table with border collapse applied to it. This is standard in the css for all of our tables.
My new table requires a small section beside the row header to be a color. Because the td tag has padding on it, a div doesn't stretch the full distance. Same problem would apply to adding a new table cell to contain only the colored bit.
The idea was that adding a border would solve the problem, and it would work, except for the border-collapse. So the problem is demonstrated here http://jsfiddle.net/dtv6P/ where you can see the left border specifically applied to the one cell, is outside the visible bounds of the table. I've tried to apply "border-collapse: separate" to the cell but that doesn't seem to work, so any ideas?
edit* the color is selected from an array based on the line of data
basic idea code (not my actual code)
<head>
<style>
td {
border: 2px solid black;
padding: 4px;
}
table {
border-collapse: collapse
}
</style>
</head>
<body>
<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td style="border-left: 10px solid;">1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>
</body>
I found this link http://www.w3schools.com/cssref/pr_border-collapse.asp and found it to be helpful.
<head>
<style>
table {
border-collapse: collapse
}
table, td {
border: 2px solid black;
padding: 4px;
}
</style>
</head>
<body>
<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td>1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>
</body>
Here's something that works... but you need to know the height of your contents... it's not very convenient, but works.
<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td><div class="withColor"></div>1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>
with your css
td {
border: 2px solid black;
padding: 4px;
height:20px;
}
td div.withColor {
position:absolute;
margin:-4px 0 0 -4px;
border-left:4px solid red;
height:28px;
}
please see this example:
http://jsfiddle.net/qTjdX/
I want the red border-bottom to show as 1 solid line, but right now the yellow border is splitting it up in 3. Is there any way to have the border-bottom take precedence? Like a z-index of sorts?
I have tried both border-collapse:collapse and border-collapse:separate.
The only thing that is working is if I make the red line thicker, but I want it to have the same width.
table {
width:100%;
border:1px solid blue;
border-collapse:separate;
}
th, td {
border:1px solid yellow;
padding:5px;
}
th {
background:black;
color:white;
}
th {
border-bottom:1px solid red !important;
}
td {
background:#efefef;
}
The problem you're having is because the border is composed of four separate sides, which meet at 45 degree angles at the corners, which is rounded in various ways. So having a bottom-border a different color to that of the sides will always cause the borders to break.
If you look at this demo:
div {
float: left;
border-width: 25px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
JS Fiddle demo.
You can see how the various borders meet, because a pixel can't be subdivided this leads to the corner-pixels being the same solid colour as one of the sides and therefore a different colour, if the colours are different, to the other side with which it connects.
To compensate the only option you really have is to use a nested element within the th:
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><div>col 1</div></th>
<th><div>col 2</div></th>
<th><div>col 3</div></th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
With the following CSS:
table {
width:100%;
border:1px solid blue;
border-collapse:collapse;
}
th {
border-bottom: 2px solid yellow;
}
th div, td {
border: 1px solid red;
}
th div {
border-bottom-width: 0;
}
JS Fiddle demo.
I have a table of 3 by 3. I need a way to add a border for the bottom of every row tr and give it a specific color.
First I tried the direct way, i.e.:
<tr style="border-bottom:1pt solid black;">
But that didn't work. So I added CSS like this:
tr {
border-bottom: 1pt solid black;
}
That still didn't work.
I would prefer to use CSS because then I don't need to add a style attribute to every row.
I haven't added a border attribute to the <table>. I hope that that is not affecting my CSS.
Add border-collapse:collapse to your table rule:
table {
border-collapse: collapse;
}
Example
table {
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid black;
}
<table>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
Link
I had a problem like this before. I don't think tr can take a border styling directly. My workaround was to style the tds in the row:
<tr class="border_bottom">
CSS:
tr.border_bottom td {
border-bottom: 1px solid black;
}
Use border-collapse:collapse on table and border-bottom: 1pt solid black; on the tr
Use
border-collapse:collapse as Nathan wrote and you need to set
td { border-bottom: 1px solid #000; }
There are lot of incomplete answers here. Since you cannot apply a border to tr tag, you need to apply it to the td or th tags like so:
td {
border-bottom: 1pt solid black;
}
Doing this will leave a small space between each td, which is likely not desirable if you want the border to appear as though it is the tr tag. In order to "fill in the gaps" so to speak, you need to utilize the border-collapse property on the table element and set its value to collapse, like so:
table {
border-collapse: collapse;
}
You can use the box-shadow property to fake a border of a tr element. Adjust Y position of box-shadow (below represented as 2px) to adjust thickness.
tr {
-webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}
I tried adding
table {
border-collapse: collapse;
}
alongside the
tr {
bottom-border: 2pt solid #color;
}
and then commented out border-collapse to see what worked. Just having the tr selector with bottom-border property worked for me!
No Border CSS ex.
No Border Photo live
CSS Border ex.
Table with Border photo live
Use
table{border-collapse:collapse}
tr{border-top:thin solid}
Replace "thin solid" with CSS properties.
Display the row as a block.
tr {
display: block;
border-bottom: 1px solid #000;
}
and to display alternate colors simply:
tr.oddrow {
display: block;
border-bottom: 1px solid #F00;
}
Another solution to this is border-spacing property:
table td {
border-bottom: 2px solid black;
}
table {
border-spacing: 0px;
}
<table>
<tr>
<td>ABC</td>
<td>XYZ</td>
</table>
If you don't want to
enforce border collapse on the table
use the TD elements styling
You can use the ::after selector to add borders to TR :
table tbody tr {
position : relative; # to contain the ::after element within the table-row
}
table tbody tr td {
position : relative; # needed to apply a z-index
z-index : 2; # needs to be higher than the z-index on the tr::after element
}
table tbody tr::after {
content : '';
position : absolute;
z-index : 1; # Add a z-index below z-index on TD so you can still select data from your table rows :)
top : 0px;
left : 0px;
width : 100%;
height : 100%;
border : 1px solid green; # Style your border here, choose if you want a border bottom, top, left, etc ...
}
It is a simple trick that I used in a scenario where I had to put spaces between table-rows so I wasn't able to add a border collapse on the table, the end result :
Hope it helps :)
I found when using this method that the space between the td elements caused a gap to form in the border, but have no fear...
One way around this:
<tr>
<td>
Example of normal table data
</td>
<td class="end" colspan="/* total number of columns in entire table*/">
/* insert nothing in here */
</td>
</tr>
With the CSS:
td.end{
border:2px solid black;
}
<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">
You can do the same to the whole row as well.
There is border-bottom-style, border-top-style,border-left-style,border-right-style. Or simply border-style that apply to all four borders at once.
You can see (and TRY YOURSELF online) more details here
Several interesting answers. Since you just want a border bottom (or top) here are two more. Assuming you want a blue border 3px thick. In the style section you could add
.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}
In the table code either
<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>
No CSS border bottom:
<table>
<thead>
<tr>
<th>Title</th>
</tr>
<tr>
<th>
<hr>
</th>
</tr>
</thead>
</table>
You can't put a border on a tr element. This worked for me in firefox and IE 11:
<td style='border-bottom:1pt solid black'>
HTML
<tr class="bottom-border">
</tr>
CSS
tr.bottom-border {
border-bottom: 1px solid #222;
}
I have a table with data and when I view it in Firefox some of the borders are not showing. Please see screenshot attached.
This does not happen in any other browsers. Tested in Firefox, IE, Safari and Chrome.
Any idea why and hot to fix it?
I use styles to format the table:
.myTbl {
border: 2px solid #cccccc;
border-collapse: collapse;
}
.myTbl th, .myTbl td {
white-space: nowrap;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding: 2px;
}
.myTbl td {
text-align: center;
width: 15%;
}
.myTbl tr:hover td {
background-color: #ffffcc;
}
.myTbl thead th, .myTbl thead:hover th {
text-align: center;
font: normal 10px arial, verdana, sans-serif;
background-color: #ffffff;
}
HTML:
<table class="myTbl">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Border-Collapse:Collapse - Borders are collapsed into a single border when possible (border-spacing and empty-cells properties will be ignored)
Border-Collapse:Seperate - Borders are detached (border-spacing and empty-cells properties will not be ignored). This is default
This link might be helpful for you to understand border-collapse:collapse and seperate and to understand how it works.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse
I also experienced this border-collapse issue in ff - where most cells within a table show borders but the occasional cell shows no border - which looks odd. I tried santa's suggested work-around and it does work - by using border-collapse: separate; and setting border-spacing to 0 it reduces the separated border spacing to zero, giving the 'appearance' of a collapsed border (in other words, what border-collapse: collapse; was suppose to do in ff).
For what it's worth the following seem to have solved my issue. I replaced:
border-collapse: collapse;
with
border-collapse: separate;
border-spacing: 0;