Alternate row highlighting in empty TableView (and ListView) rows

by Jonathan Giles | Nov 27, 2011 | Controls, Tips n' Tricks, UI Design | 4 comments

One thing I see asked a lot (either directly via email, or in the rather excellent JavaFX Forums) is why does TableView (and ListView) look like this in JavaFX 2.0:

Or, more specifically, why it doesn’t look like this:

I can see where this question comes from, given this is how Swing’s JTable looks:

It comes down to taste I guess, but given that there is a subset of developers who expect this look, I thought I’d put a blog post up here to clarify how it is done (and to save me having to explain it to people individually by email!) 🙂 All you need is the following CSS for TableView:

.table-row-cell:empty {
 -fx-background-color: white;
}
.table-row-cell:empty .table-cell {
 -fx-border-width: 0px;
}

Similarly, for ListView, you can get away with just the first statement above (slightly modified for ListView):

.list-cell:empty {
 -fx-background-color: white;
}

The end result is precisely what you see in the second image above (there ain’t no photoshop trickery here!) 🙂 Hopefully this helps people customising their user interfaces, and hopefully also encourages you to further explore what is possible. The best starting point is the excellent JavaFX documentation website, the CSS Reference (which is about to be updated for 2.0.2 I believe), and as always, the caspian.css file that ships with every JavaFX release (embedded within jfxrt.jar).