Alignment!

Dear Tobias,

I know you can help me to solve this. Either I’m doing something wrong, or I’m doing it the wrong way.

I’m trying to get three tables next to each other, like this:
http://blogs.isb.bj.edu.cn/faculty-blogs/

I got this far:
http://blogs.isb.bj.edu.cn/faculty-blogs-demo/

Here is the CSS I have pieced together:
.tablepress .odd td {
background-color: #44403f;
}
.tablepress .even td {
background-color: #ffffff;
}

.tablepress-id-2 {
width: 50%;
float: left;
}

.tablepress-id-3 {
width: 50%;
float: middle;
}
.tablepress-id-4 {
width: 50%;
float: right;
}

.tablepress thead th {
background-color: #d8d8d8;
}

.tablepress .row-hover tr:hover td {
background-color: #c2c2c2;
}

The questions! So how can I get the three tables next to each other? And what did I do wrong for the hover colour? It remains blue.

I’m doing three tables because I was to easily be able to add a new cell if and when a new blog is created and keep the list in alphabetical order.

Thank you so much for any assistance!

Matt

https://wordpress.org/plugins/tablepress/