CSS: Thin Table

In this how-to, I cover the steps to convert a regular HTML table into a cool looking table with thin borders and a rollover of the current row. In other additional how-to's, this table will be extended to add drag and drop features to the table. In addition, controls are added to remove rows, or move them to the top or bottom of the page.

Here is the source code for the tables and CSS.

thinTable.html

The rest of the how to takes a deeper dive of each table and explains the tweeks made to each to get to the final product.

HTML Table

To begin with, here is a simple HTML table. The tables stores a list of books in a wishlist. The table includes columns listing the order of the items, the book title, rating, and author. In addition, columns have been included for future UI enhancements. The border has been set to a width of 1 px.

List Order     Book Title Rating Author Remove
1 Top Last Book #1 John Doe
2 Top Last Book #2 Jane Doe
3 Top Last Book #3 Joe Doe
4 Top Last Book #4 Jill Doe
5 Top Last Book #5 John Smith
6 Top Last Book #6 Joe Smith
7 Top Last Book #7 Jane Smith
8 Top Last Book #8 Jill Smith

Table 01

Let the styling begin!!! First, the #table01 rule sets the table width, adds a 1px border, a 20px margin, and sets the background to white. Notice that the border only affects the outer border of the table. Additional rules need to be added to change the interior.

List Order     Book Title Rating Author Remove
1 Top Last Book #1 John Doe
2 Top Last Book #2 Jane Doe
3 Top Last Book #3 Joe Doe
4 Top Last Book #4 Jill Doe
5 Top Last Book #5 John Smith
6 Top Last Book #6 Joe Smith
7 Top Last Book #7 Jane Smith
8 Top Last Book #8 Jill Smith

Table 02

The border needs to be added to the interior of the table. So take a look at the #table02 and #table02 td rules. The #table02 td rule adds a border to the interior of the table. Notice the border around each cell. By default, HTML tables have separated cell border model. This adds the spacing to the table cells. To get the result we want, the needs to be set to a collapsed model.

List Order     Book Title Rating Author Remove
1 Top Last Book #1 John Doe
2 Top Last Book #2 Jane Doe
3 Top Last Book #3 Joe Doe
4 Top Last Book #4 Jill Doe
5 Top Last Book #5 John Smith
6 Top Last Book #6 Joe Smith
7 Top Last Book #7 Jane Smith
8 Top Last Book #8 Jill Smith

Table 03

To get the thin border result, take the #table02 and tweak it to add the border-collapse property to the rule. The result is #table03 rule. And the result in the display is the thin lined table shown below.

List Order     Book Title Rating Author Remove
1 Top Last Book #1 John Doe
2 Top Last Book #2 Jane Doe
3 Top Last Book #3 Joe Doe
4 Top Last Book #4 Jill Doe
5 Top Last Book #5 John Smith
6 Top Last Book #6 Joe Smith
7 Top Last Book #7 Jane Smith
8 Top Last Book #8 Jill Smith

Table 04

With the border fixed, it is time to make the table look a little more attractive. The #table04 rules set column widths, font size and font width. In addition, the border styling has been changed so borders are only around the rows. I did this using classes to different classes to be applied to rows even though you could have used <tr> in this example.

List Order     Book Title Rating Author Remove
1 Top Last Book #1 John Doe
2 Top Last Book #2 Jane Doe
3 Top Last Book #3 Joe Doe
4 Top Last Book #4 Jill Doe
5 Top Last Book #5 John Smith
6 Top Last Book #6 Joe Smith
7 Top Last Book #7 Jane Smith
8 Top Last Book #8 Jill Smith

My Thin Table

This is the final styled table defined with the #myTable rules. Everything is the same as before, except a :hover selector added for rows.

Finding just the code I needed to achieve the table seen below was much more difficult that it should have been. Hopefully this will help others out who would like to achieve similar results.

List Order     Book Title Rating Author Remove
1 Top Last Book #1 John Doe
2 Top Last Book #2 Jane Doe
3 Top Last Book #3 Joe Doe
4 Top Last Book #4 Jill Doe
5 Top Last Book #5 John Smith
6 Top Last Book #6 Joe Smith
7 Top Last Book #7 Jane Smith
8 Top Last Book #8 Jill Smith

If you have any comments about this page, please post your comments on my blog entry referring to this page.