Hi,
thanks for your post, and sorry for the trouble.
Yes, this should be possible. Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!
Regards,
Tobias
Hi Tobias,
Thank you for looking into it.
Unfortunately I can’t, however, I just set up a SandBox example real quick that’d be enough to showcase what I’m talking about.
Now what I’m trying to attempt here is to change the color of the top and bottom line to the background color of the row.
http://hungry-millipede.w6.wpsandbox.pro/table/
Thanks again.
Hi,
thanks. Usually, some CSS like
.tablepress tr:hover td {
border-top: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
}
should work. Note that for this work, there should not be a border on the tr element.
Regards,
Tobias
Thanks.
I kinda managed to implement it into my original table, but only the bottom border changes—the top border remains.
The code you gave me behaves that way too: Only the bottom border changes to red.
I also don’t understand what you mean by “Note that for this work, there should not be a border on the tr element.” If I remove the border attributes from the following part of the code, the very first top border is being removed, too.
.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
background-color: #ffffff;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
border-left: none;
border-right: none;
font-family: Helvetica;
font-size: 14px;
font-weight: lighter;
color: #4d4d4d;
}
Am I missing something obvious? Probably.
Oh I see. The “Note that for this work, there should not be a border on the tr element.”-part and the “top border not changing its color”-issue are probably related.
I got it to work once, though—and I’m sure it was without removing the border attributes from the tr line. I wonder how I did it though. I had to revert it because of another issue and I didn’t save it. Now I can’t reproduce it.
Hi,
you could try removing
.tablepress tr,
from that CSS and re-adding it in a separate CSS block with the other CSS properties, just not the border-top and border-bottom.
Regards,
Tobias
Yeah I did, I created an extra element just for tr. Still nothing. I pasted the code into the plugin options and refreshed the site again. You might wanna take a look.
I’m sure there’s plenty of unnecessary code in there too, but I’m only in the early stages. Maybe some weird line is intervening with the command. I admit I’m having a hard time focusing today . . .
Thanks again.
Yeah and also the link is broken. For whatever reason the table is now here:
http://hungry-millipede.w6.poopy.life/table/
Poopy life. Right. 😉
Hi,
I’m not really sure what’s going on here, but I use the completely reduced version
.tablepress tbody td {
border-color: #e5e5e5;
}
.tablepress tbody tr:hover td {
border-color: #ff0000;
border-bottom: 1px solid #ff0000;
}
it seems to work for me.
Regards,
Tobias
Wait, does that mean there’s no attribute for the top border at all? Is that how table borders work—only the bottom border needs a value? Because that is the one part I don’t really understand: It seems a row doesn’t actually “owns” two borders as both the preceding and the subsequent row share the same one, respectively. It’s a bit confusing.
Another thing: The code doesn’t affect the header in this example. The border bottom of the header remains gray. Can I add a line for that too, and will that also change the top border of the header?
If I use this bit of code you posted, I also get it to work. However, when I implement it into my table, it doesn’t do the trick anymore.
I will probably have to create the CSS from scratch and see at what point exactly it stars failing to work. That seems to be the only way to find out what’s causing this.
Thanks again.
Now there’s an inconsistency in what you posted:
The first one was:
.tablepress tr:hover td {
border-top: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
}
The second one was:
.tablepress tbody td {
border-color: #e5e5e5;
}
.tablepress tbody tr:hover td {
border-color: #ff0000;
border-bottom: 1px solid #ff0000;
}
You left out the top border in the second post (it still works though), and instead of “.tablepress tr:hover td” you wrote “.tablepress tbody tr:hover td.”
Does that have any effect?
You see, what I mean is, both ways work—with and without the “border-top”-part.
This one:
.tablepress tr:hover td {
border-top: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
}
As well as this:
.tablepress tr:hover td {
border-bottom: 1px solid #ff0000;
}
So what I’m trying to understand is whether the top border of a row is actually the bottom border of the preceding row, or the other way around.
You know what, never mind. I don’t need to understand everything. It’s working for me now, like this:
.tablepress tbody td {
border-color: #e5e5e5;
}
.tablepress .row-hover tr:hover td {
background-color: #f8f8f8;
}
.tablepress tr:hover td {
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid #f8f8f8;
}
[The only confusing thing remaining: What’s the difference between “.tablepress .row-hover tr:hover td” and “.tablepress tr:hover td”? There seems to be one anyway, because when I copy the border information into the first element (with the “.row-hover”), the first row of the table would jump down by one pixel on hover, which it doesn’t do when I leave it in the second element (without the “.row-hover”).]
For it to work properly, I cannot enter any border values in the “.tablepress tbody td” other than “border-color.” Any additional information is exactly what’s causing the top border to not respond. So I left it out entirely. It doesn’t seem necessary anyway.
So far, so good . . .
But there’s one last issue—and my theme is partly to blame for it: I’d like to enable the first and last row borders of my table which are disabled by default. I saw that they’re usually there in the regular WordPress themes. How can I activate them without ruining the above feature again?
Yeah, apologies for the mess, and thank you.
I’ll be back with some more questions and ideas (and a donation for that matter) before I’m all set and good to go.
PS: I think I know what’s causing the 1px jump. I just realized the whole table jumps down by one pixel. It’s probably because it’s expecting a top border above the first row, which isn’t there. The same applies to the last row: The “Edit” button also jumps down by one pixel when hovering over it. But that border is also missing—it only appears on hovering. So I somehow need to enable those.
Hi,
as you can see, getting borders right can be tricky. The reason is that often many things influence them: The theme CSS, the TablePress default CSS, and then our “Custom CSS” tries. And on top of that, there are different ways of how borders can be implemented (with that idea of two rows sharing a common border, etc.)
That’s why it’s usually better to test directly on the page/table in question, and maybe use the developer tools in the browser (I recommend those from Chrome for this).
Regarding the .row-hover: That’s CSS class that is used in TablePress tables that have the Row Background Hover Highlight feature enabled. It’s not really necessary for your idea, but it can sometimes help with consistency.
Regards,
Tobias
