Our OCP 11 (IZ0-815) book is at the printer. It comes out this month! In fact we are doing a CodeRanch promo for it next week. The book comes with an online test bank. The online bank includes two full length mock exams and every question in the book.

While uploading our questions to the test bank software, one of the test bank staff noticed an error. Two of our answer choices were the same. Luckily this wasn’t the correct answer, so a pretty minor errata. But it is our first errata so time to start the errata list.

For our Java 8 books, we used an HTML table for the errata list because our WordPress instance didn’t have table support. Editing the HTML was a pain so I was happy to see that now there are native WordPress tables. So I tried it out. Easy to enter data, add/remove rows/columns. Excellent. It’s all you could want in a table editor. Well. Almost.

Attempt #1

I chose the striped option. And this is what I got my default. I agree that the error column is the most important. And it’s nice that it is wide. But the other columns are so narrow to be unreadable.

Attempt #2

I looked at what my options were on the table. There was only one option that looked relevant. So I clicked it

Yuck; that’s even worse. The error column is the most important and it is so narrow it is hard to read. And there is lots of wasted whitespace.

Attempt #3

I got rid of the Type column to get a bit more real estate. Then I discovered there was a CSS option. I made up a unique CSS class name. Given that 815 is in the exam name, that sounds unique on our site.

I also went to the Additional CSS screen:

• Settings
• Appearance
• Customize
• Additional CSS

I added this CSS:

/* By default, wordpress only allows default or equals column size. Both look bad on the errata table so using CSS to customize */

/* page # */
.ocp-815-errata-table td:nth-child(1) {
  width: 10%;
  }

/* chapter #*/
.ocp-815-errata-table td:nth-child(2) {
  width: 10%;
}

/* actual errata */
.ocp-815-errata-table td:nth-child(3) {
  width: 50%;
 }

/* reporter */
.ocp-815-errata-table td:nth-child(4) {
  width: 15%;
 }

/* confirmed */
.ocp-815-errata-table td:nth-child(5) {
  width: 15%;
 }

Finally I published and got: